using callback func in Component

프로퍼티 (=> props)를 사용하면 상위 컴포넌트(부모 컴포넌트, 예를 들어 APP.jsx)의 데이터를 하위 컴포넌트(자식 컴포넌트, 예를 들어 Counter)에 전달할 수 있다고 배웠다.

예를 들어, count를 props로 넘겨줘서 하위 컴포넌트에서 읽기 전용(고칠 수는 없다. 고치려고 하면 에러)으로 데이터에 접근해서 출력이 가능하다.

만약 하위 컴포넌트에서 프로퍼티(count 값)를 변경해야 할 때는 어떻게 해야할까?

프로퍼티 원본(원본의 값, count)을 수정할 수 있는 함수를 하위 컴포넌트에 제공하면 된다.

콜백 함수는 정의된 위치에서 실행되지 않고, 특정 상황에서 실행되는 함수를 말하는데, 프로퍼티로 콜백 함수를 전달해주면 된다.

실제로 코드에 적용해보자. 예시 코드는 아래와 같다.

//App.js

function App() {
  const [count, setCount] = useState(1);

  function increaseCount() {
    setCount(count => count + 1);
  }
  function decreaseCount() {
    setCount(count => count - 1);
  }
  function resetCount() {
    setCount(1)
  }

  return (  
    <React.Fragment>
   
      ~~~
      
       <CounterApp 
       		count = {count} 
            onAdd = {increaseCount} 
            onMinus = {decreaseCount} 
            onReset = {resetCount}
       />
    </React.Fragment>
  );
}

export default App;


// CounterApp.jsx 

import React from 'react';

function CounterApp(props) {
    return (
        <div>
            <h1>CounterApp</h1> 
            <div>
                현재 카운트 : {props.count}
            </div>
            
            <button onClick={props.onAdd}> count + 1 버튼 </button>
            <button onClick={props.onMinus}> count - 1 버튼 </button>
            <button onClick={props.onReset}> Reset</button>
        </div>
    );
}

export default CounterApp;

잘 동작한다.

이렇게 사용한다는 건 알았고, 동작 방식에 대해 알아보자.

리액트는 단방향 흐름 방식이다.

React는 프로퍼티(property, props), 스테이트(state)와 같은 데이터를 상위 컴포넌트에서 하위 컴포넌트 방향으로 전달한다.

위와 같이 데이터 변경이 필요한 경우에는 call back 함수를 호출하여 원본 데이터가 위치한 상위 컴포넌트에서 해당 데이터를 변경하고 다시 자식(하위)컴포넌트로 전달하는 방식이다.

이와 같은 데이터 흐름 방식을 단방향 흐름 방식이라고 하며, 이는 원본 데이터의 무결성을 지켜준다.

위에서 함수형 컴포넌트로 선언하여 예시를 들었다. React에 함수형 컴포넌트가 추가되고 훅(hook)을 사용할 수 있게 돼서 state를 useState 함수를 통해 관리한다.

이로써 함수형 컴포넌트에서는 관리해야 할 this가 없기 때문에 this 범위 오류(this binding error)가 발생하지 않고 이에 따라 bind 함수를 사용할 필요가 없어진 것이다.

현재 공부하면서 보고 있는 책(리액트 프로그래밍 정석)의 실습 예제에서도 class component로 코드와 예제 및 개념을 설명하고, this binding error 가 발생하였으며, bind 함수를 통해 이를 해결한다~~ 라고 주저리 주저리 되어있다.

리액트 공식문서에서도 함수형 컴포넌트와 훅의 사용을 권장하지만 개념서가 오래되다 보니 전부 클래스 컴포넌트로 되어있다.. 구글에도 전부 클래스형 컴포넌트로 나와있는데 도대체 왜 그런지 모르겠다.