10/20 학습

state

• 이벤트에 따라 변할 수 있는 값
• props로 전달된 것은 state가 아니다
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하면 state가 아니다.
• state는 최소화 하는 것이 좋다.

역방향 데이터 흐름

• 리엑트의 데이터 흐름은 하향식(부모 컴포넌트 -> 자식 컴포넌트)
  -hook을 사용해 state를 하위 컴포넌트에서 변경하거나, side effect를 처리할 수 있다.

• hook은 컴포넌트 최상위에 선언해야 한다

  https://ko.reactjs.org/docs/hooks-rules.html#explanation

• state hook
  
  

  텍스트박스에 입력한 글자가 나오는 react app

//상위 컴포넌트
function Parent() {
  let [state, setState] = useState("initial value")

  //state를 변경하는 메소드
  function changeState(newStr){
    setState(newStr);
  }


  return (
    <div className="App">
      <p>{state}</p>
      {/* state를 변경하는 함수(handler)를 하위 컴포넌트에 props로 전달 */}
      <Child changeState={changeState}/>
    </div>
  );
}

//하위 컴포넌트
function Child({changeState}){
    function handleChange(ele){
        //onChange이벤트가 일어날 때마다 changeState메소드가 실행된다.
        changeState(ele.target.value);
    }
    return <input type="text" onChange={handleChange}></input>
}

• effect hook
  • side effect 처리에 사용
  • 기본적으로 컴포넌트가 처음 생성될 때, 컴포넌트에 새로운 props가 전달될 때, 컴포넌트의 state가 바뀔 때 effect hook이 실행된다.
• 첫 번째 인자로 콜백 함수, 두 번째 인자로 조건을 담은 배열을 배열을 갖는다(종속성 배열), 두 번째 인자는 생략 가능하다.
• 종속성 배열의 값이 변할 때 첫 번째 인자로 주어진 콜백 함수가 실행된다.
• 빈 배열을 두 번째 인자로 주면 컴포넌트가 처음 생성될 때만 effect함수가 실행된다.
  
  

  'count 증가' 버튼을 누르거나 텍스트 박스에 문자를 입력하면 state가 변한다. 하지만 useEffect의 두 번째 인자로 주어진 배열에는 'state'라는 state만 들어가 있기 때문에 콜백 함수는 글자를 입력할 때만 실행된다.

//상위 컴포넌트
function Parent() {
  let [state, setState] = useState("initial value")
  let [count, setCount] = useState(0)

  //state를 변경하는 메소드
  function changeState(newStr){
    setState(newStr);
  }

  function changeCount(){
    setCount(count+1);
  }

  useEffect(() => {
    console.log("글자 입력");
  }, [state])

  return (
    <div className="App">
      <p>{state}</p>
      <p>{count}</p>
      {/* state를 변경하는 함수(handler)를 하위 컴포넌트에 props로 전달 */}
      <Child changeState={changeState} changeCount={changeCount}/>
    </div>
  );
}

//하위 컴포넌트
function Child({changeState, changeCount}){
    function handleChange(ele){
        //onChange이벤트가 일어날 때마다 changeState메소드가 실행된다.
        changeState(ele.target.value);
    }

    function handleClick(){
        changeCount();
    }
    return (
        <div>
            <input type="text" onChange={handleChange}></input>
            <button onClick={handleClick}>{"count 증가"}</button>
        </div>
    )
}