React 지식+2

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>
    )
}

• React.memo()를 활용하여 Btn의 렌더링 결과를 MemorizedBtn에 저장해놓는다.

• 추후 변경되는 props가 없다면 re-render 되지 않는다.