React 지식+2

김민창·2021년 12월 23일

state

컴포넌트 자기 자신이 가지고 있는 값.
변화가 필요하다면 setState()를 통해 값을 변경할 수 있다.
state는 함수 내 선언된 변수처럼 관리된다.

사용

const [value, setValue] = React.useState("data");

value 라는 이름의 변수 생성
setValue를 활용하여 value 값 변경

props

부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용한다.
props는 함수 매개변수처럼 컴포넌트에 전달된다.

컴포넌트간 전달

다음과 같은 App 컴포넌트에서 Btn 컴포넌트로 전달 하고자 한다.

function App(){
    return(
        <div>
            <Btn test="click!!"/>
        </div>
    )
}

컴포넌트에서 보내고싶은 데이터 props를 자식 컴포넌트로 보낸다면 자식 컴포넌트에서는 첫번째 argument 속으로 Object 형태로 들어감
자식 컴포넌트에서 사용하는법은 두가지가 있다.

첫번째는 Object를 그대로 받아 사용하였고,
두번째는 Object를 필요한것만 풀어서 사용한 것이다.

// 1번째
function Btn(props){
    return <button>{props.test}</button>
}

// 2번째
function Btn({test}){
    return <button>{test}</button>
}

PropTypes

props 를 전달하는 과정에 개발자의 실수 등으로 타입을 잘못적거나, 필수 props를 넘기지 않는 경우를 방지.

설치

https://www.npmjs.com/package/prop-types

잘못된 타입을 넘기거나, 필수 props를 넘기지 않더라도 react는 에러로 표시하지 않기 때문에 최소한의 경고문을 얻기 위함.
다음 코드는 Btn 컴포넌트로 넘겨야하는 props를 정의한 코드.

Btn.propTypes={
    text: PropTypes.string.isRequired,
    fontSize: PropTypes.number,
}

text -> string 필수
fontSize -> number

React.memo

예시

부모의 state의 변경이 있다면 모든 자식들은 re-render가 된다.
하지만 코드가 다음과 같은 경우 약간의 문제가 있다.

function Btn({text, fun}){
    console.log(text);
    return <button
        onClick={fun}>{text}</button>
}

function App (){
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return(
        <div>
            <Btn text={value} fun={changeValue} />
            <Btn text="Continue"/>
        </div>
    )
}

다음과 같은 두가지 버튼이 만들어지고, console.log의 로그도 다음과 같다.

첫번째 버튼을 클릭하여 onClick 이벤트를 발생했을때 버튼의 변화와 로그는 다음과 같다.

Continue 버튼은 전혀 바뀌는게 없지만 re-render가 발생한다.

그래서?

React.memo()

상단의 코드를 약간만 손을 보겠다.

function Btn({text, fun}){
    console.log(text);
    return <button
        onClick={fun}>{text}</button>
}

const MemorizedBtn = React.memo(Btn);		// 여기

function App (){
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return(
        <div>
            <MemorizedBtn text={value} fun={changeValue} /> // 여기
            <MemorizedBtn text="Continue"/>                 // 여기
        </div>
    )
}