[코드캠프 2주차] props, setState 원리

[props]

따로따로 컴포넌트를 분리해서 사용하는 리액트의 특성상 변수나 함수에 접근을 해서 사용하기 위해서 Props를 제공한다. Props는 부모 컴포넌트에서 자식 컴포넌트로 값을 내려준다고 생각하면 편하다.
props는 props 안에서 객체 형식으로 값을 넘겨준다.
따라서 자식 컴포넌트에서 값을 사용하고 싶다면 props.키값 으로 사용한다.
구조분해 할당으로 const {키값} = props 으로도 접근해서 사용 가능 하다.
자식에서 부모한테 주는 방법은 없다.
이러한 구조로 인해 리액트는 단방향 구조를 가지는 프레임워크이다.
말 그대로 부모에서 자식으로 밖에 컴포넌트를 주지 못하기 때문에 단방향 구조로 짜여진다

//부모 컴포넌트
import "./styles.css";
import React, { useEffect, useState } from "react";
import Props from "./props";
export default function App() {
  const [sendProps, setSendProps] = useState(true); //props 전달을 위한 state 작성

  const changeState = () => {
    setSendProps((sendProps) => !sendProps);//true false로 값 변경
  };

  useEffect(() => {
    console.log(sendProps);//상태값 변경 시 제대로 state가 변경되는지 확인
  }, [sendProps]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={changeState}>State 변경</button>//onClick 이벤트 발생
      <Props sendProps={sendProps}></Props>//자식 컴포넌트에게 props 전달
    </div>
  );
}

//자식 컴포넌트
import React from "react";
export default function Props(props) {
  //props가 넘어올때는 props={sendProps:상태값} 으로 넘어오기 때문에 구조분해 할당으로 가능
  const { sendProps } = props; //props를 받기
  console.log("props", sendProps);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

정상적으로 props로 인해 부모컴포넌트의 상태값이 변경 되었을때, 자식 컴포넌트도 변경 되는것을 확인 할 수 있다.

[setState 동작원리]

setState()는 리액트의 함수형 컴포넌트 내에서 상태를 관리하기 위해 사용하는 hooks인 useState()를 통해 반환되는 함수이다.

setState()의 특징

1. 기본적으로 비동기로 동작한다.
2. 연속적으로 호출했을 때 리액트 내부적으로는 BATCH 처리를 한다.
3. state 객체를 넘겨줄 수 있을 뿐만 아니라 새로운 state를 반환하는 함수를 인자로 넘겨줄 수 있다.

기본적으로 setState 함수는 state를 변경하고 state가 포함된 해당 컴포넌트 전체를 다시 렌더링 한다.
리액트가 렌더링 되는 조건은 상태값이 변경 되었을때 이기 때문에 state가 변경되면 state가 해당되는 컴포넌트는 다시한번 렌더링이 된다. 이것을 리렌더링 이라고 한다.

그런데 이게 동기적으로 동작하는 것이 아니라 비동기적으로 동작함에 주목해야한다(= setState()를 실행하자마자 바로 state를 변경하고 바로 렌더링하는게 아니다!).

만약 setState()가 연속으로 여러번 호출된다면...?

리액트는 state가 변경 됨으로써 Virtual Dom에서 Dom을 변경시킨다.
하지만 setState()가 바로 실행되고 상태값을 업데이트 하게 된다면 매번 렌더링을 할때마다 새롭게 기존의 DOM에 Virtual DOM에 변경된 내용들을 지속적으로 갈아 끼워줘야 한다. ==>> 상당히 번거로움.

setState는 언제 상태값을 업데이트 할까??

setState는 하나의 state가 변경될때 컴포넌트 자체를 다시 한번 렌더링 한다.
state가 변경될때, 예를 들어 하나의 함수안에서 setState를 한 후에 함수 안에서 state를 확인 하려고 할때, 바로 확인을 할 수 없다. 함수가 실행 되고 나서 다시 재렌더링을 해야 상태값이 변경이 되는 것이다.