[리액트를 다루는 기술] 3장. 컴포넌트

템플릿 이상의 컴포넌트의 기능!

•  데이터에 맞춰 UI를 생성합니다.
•  라이프사이클 API를 이용하여 컴포넌트가 화면에 나타날 때,사라질 때, 변화가 일어날 때  주어진 작업들을 처리할 수 있습니다.
• 임의 메서드를 생성하여 특별한 기능을 덧붙일 수 있습니다.

클래스형 컴포넌트 

:  함수형 컴포넌트와 달리 state 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의 할 수 있습니다.

 

[ 알아둘것!) 리액트 v16.8 업데이트 이후 Hooks 의 도입으로 state와 라이프사이클 API를 다른 방식으로 사용할 수 있게되었습니다. ]

 

예시)

//rcc
import React, { Component } from 'react';

class temp extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default temp;

[ 알아둘것!) extension : Reactjs code snippets 설치하면  예약어를 통해 쉽게 클래스형 컴포넌트와 함수형 컴포넌트를 생성할 수 있습니다.]

• 클래스형 컴포넌트 : rcc

• 함수형 컴포넌트 : rsc

차이점?

• 함수형 컴포넌트와 다륵 state와 라이프사이클 기능을 사용할 수 있습니다.
• 임의 메서드를 정의할 수 있습니다.

함수형 컴포넌트의 장점?

• 선언하기 편하며, 메모리 자원을 덜 사용합니다.
• v16.8 업데이트 이후 "Hooks" 기능 도입으로 state와 라이플사이클 API 기능 사용이 가능해졌습니다. 

import React from 'react';
import Temp from './Temp';

const App = () =>{
	return <Temp />
};

export default App;

export default <컴포넌트명> :  다른 파일에서 import 가능하도록 모듈을 내보내줍니다.

import <컴포넌트명 : 변경가능> from <컴포넌트경로> : export한 컴포넌트 모듈을 불러옵니다.

 

props

: 컴포넌트 속성을 설정할 때 사용하는 요소입니다. 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

(예시에서는 App 컴포넌트 = 부모컴포넌트) 

App.js
/**********************************************************************/
import React from 'react';
import Temp from './Temp';

/////1)
const App = () =>{
	return <Temp name="gildong">children</Temp> //부모컴포넌트에서 props 값 지정
};

export default App;

Temp.js
/**********************************************************************/
import React from 'react';
import ProTypes from 'prop-types'; // 5) 컴포넌트 필수 pros 혹은 props의 타입 지정

/// 2) 비구조화 할당 전
const Temp = props => {
	return <div>Hi, My name is {props.name} 
                children : {props.children} //children : 태그사이의 값
    </div>;
};

///// 3) 비구조화 할당 후
const Temp = ({name,children}) => {
	return <div>Hi, My name is {name} 
                children : {children} //children : 태그사이의 값
    </div>;
};

//// 4)
Temp.defaultProps = { //부모컴포넌트에서 name이 넘어오지 않았을때 기본값
	name : 'chulsu';
};

//// 5)
Temp.propTypes = {
	name : ProTypes.string // name 타입 String 
    old : ProTypes.number.isRequired // old 필수값, 타입 number
};

export default Temp;

state

: 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 부모 컴포넌트가 설정하여 자식 컴포넌트는 읽기 전용으로만 사용할 수 있었습니다. state를 이용하여 컴포넌트 내부에서 값을 변경할 수 있습니다.

클래스형 컴포넌트의 state 

import React, { Component } from "react";

class Counter extends Component {
	/// 1)constructor 사용
	constructor(props){
    	super(props);
        this.state = {
        	number : 0
        }
    }

	/// 2)
    state = {
        number: 0,
    };
    render() {
        const {number} = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={() => {
                    	/// 3)
                        this.setState(
                            (prevState) => {
                                return { number: prevState.number + 1 };
                            },
                        /// 4)
                            () => {
                                console.log("callBack");
                            }
                        );
                    }}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

1) constructor를 사용하여 state 초기값 지정

2) constructor 선언하지 않고 state 초기값 지정

3) 객체 대신 함수 인자를 전달 

4) setState 콜백함수 등록

 

함수형 컴포넌트의 useState 사용

: v16.8 이후부터 함수형 컴포넌트에서 state를 사용할 수 있게 되었습니다.

import React, { useState } from "react"; /// 1)

const Say = () => {
    /// 2)
    const [message, setMessage] = useState("");
    /// 3)
    const onClickEnter = () => setMessage("안녕하슈");
    const onClickLeave = () => setMessage("안녕가슈");
    
    /// 5)
    const [color, setColor] = useState("yellow");

    return (
        <div>
        	/// 4)
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{ color }}>{message}</h1>
            <button style={{ color: "red" }} onClick={() => setColor("red")}>
                빨간색
            </button>
            <button
                style={{ color: "green" }}
                onClick={() => setColor("green")}
            >
                초록색
            </button>
            <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
                파란색
            </button>
        </div>
    );
};

export default Say;

1) useState를 사용하기 위해 import 해줍니다.

2) useState()로 초기값을 설정합니다.

3) 첫번째요소: 현재상태 , 두번째요소: 상태를 바꾸어주는 함수

4) 이벤트 연결

5) 또 다른 상태 관리 

 

[알아둘것!? : state의 값을 변경할 때는 setState 혹은 useState를 통해 전달받은 세터함수를사용해야 합니다.]

1) 배열혹은 객체의 사본생성

2) 사본에 값 업데이트

3) 그 사본의 상태를 setState / 세터함수를 통해 업데이트 합니다.