React State와 Props / Side effect / 순수함수 / Hooks

Props

외부에서 전달받은 값이다. 전달받은 값이므로 함부로 변경할 수 없도록 읽기 전용으로 되어있다. 읽기 전용이 아니라면 변경할 수 있을 것이고, 부모 컴포넌트에서 전달받은 props를 자식 컴포넌트에서 변경하여 상위로 영향을 끼치게 된다. 이는 React의 데이터 하향식 단방향 흐름의 원칙에 위배된다.
props는 객체이다. 내부에 어떤 값도 전달할 수 있도록 객체로 되어있다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child gift={"장난감"} /> // "장난감"이라는 값을 가진 속성 gift를 전달
    </div>
  );
};

function Child(props) { // props 객체
  return (
    <div className="child">
      <span>{props.gift}</span> // props.gift 사용
    </div>
  );
};

 

State

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

const [isOpen, setIsOpen] = useState(false);

컴포넌트 내부에서 변할 수 있는 값, 상태라고 한다. React에서 상태를 다루는 방법 중 하나로 useState라는 Hook을 제공한다.
React에서 상태는 상태 갱신 함수를 통해서만 갱신한다. 값을 재할당하면서 강제로 변경하려고 하면 제대로 프로그램이 정상적으로 동작하지 않는다. 
상태가 변경되면 React 컴포넌트는 리렌더링된다. 

또한 리액트의 상태를 업데이트 할 때에는 불변성을 유지해주어야 한다. 불변성을 유지해야 리액트 컴포넌트의 성능을 최적화할 수 있다. 상태가 배열일 때, setter를 통해서 다음과 같이 push대신 concat을 이용하는 등의 방식으로 상태를 업데이트해주어야 한다.

const [foods, setFoods] = useState([]);
const [text, setText= useState("");

const handleChange = (e) => {
    setText(e.target.value)
}

const handleClick = () => {
    const newFoods = foods.concat(text); // for immutability
    setFoods(newFoods);
    setText("");
}

const foodsList = foods.map((food, index) => <li key={index}>{food}</li>)

return (
    <>
        <input value={text} onChange={handleChange} />
        <button onClick={handleClick}>추가</button>
        <ul>{foodsList}</ul>
    </>

)

 

부수 효과(Side effect)

함수 내부의 구현이 함수 외부에 영향을 끼칠 경우 Side effect가 발생한다고 한다. 함수가 수행해야 하는 본연의 일 이외에 부수적으로 수행하는 경우이다. 예를 들어 두 수를 매개변수로 입력받고 더해서 합을 반환하는 함수 내부에 console.log 또는 alert 함수가 있다면 이들로 값을 출력하는 일은 부수 효과이다.

리액트에서는 fetch API로 외부 데이터를 받아오거나 localStorage를 사용하거나 setTimeout과 같은 타이머 함수를 사용할 때 부수 효과가 발생한다.

 

순수 함수

함수형 프로그래밍에서 어떤 외부 상태에 의존하지도 않고 영향을 끼치지도 않는, 부수 효과가 없는 함수를 순수 함수라고 하고, 그렇지 않은 경우 비순수 함수라고 한다. 

순수 함수는 어떤 입력을 매개변수로 받으면 항상 같은 값을 반환한다.
예를 들어 Math.random()은 실행할 때마다 0에서 1사이의 값을 랜덤으로 반환하므로 순수 함수가 아니다.
어떤 함수가 fetch API를 이용해 AJAX요청을 한다면 이 또한 순수 함수가 아니다. 네트워크 상황 또는 서버의 상태에 따라 응답코드가 달라지기 때문이다.

함수가 외부 상태를 변경하면 상태 변화를 추적하기가 어려워진다. 따라서 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋다. 

리액트의 컴포넌트는 순수 함수이다. props를 입력으로 받고 JSX 엘리먼트를 반환하는 순수 함수이다. 하지만 컴포넌트 내에서 fetch로 외부 API 정보를 받아오거나 localStorage를 사용하거나 setTimeout과 같은 타이머 함수를 사용한다면 이는 리액트의 입장에서 부수 효과이다. 리액트는 이런 부수 효과를 잘 다루기 위해서 useEffect라는 Hook을 제공한다.

 

Hooks

Hooks는 리액트 16.8버전에 새로 도입된 기능이다. 함수 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등이 모두 Hook이다. 이전 버전의 리액트에서 함수 컴포넌트에서 할 수 없었던 작업들이 있는데, 새로 도입된 Hooks를 통해 다양한 작업들이 가능해졌다. 커스텀 Hook을 만들 수도 있다.