Controlled Component

트위터를 예로 들어보면,
트위터의 트윗은 우편봉투와 같다.

우편봉투에는 여러 정보가 담기는데, 보내는 사람과 받는 사람의 정보는 항상 바뀔 수 있다.

트윗도 마찬가지이다.

받는 사람은 팔로워로 정해져 있지만,

보내는 사람, 내용은 항상 바뀔 수 있는 값, 상태다.(state)

React에서는 상태에 해당하는 데이터를 state로 따로 관리하고 싶어한다.

그리고 React가 state를 통제할 수 있는 컴포넌트를 Controlled Component라고 한다.

React가 state를 통제할 수 있는 조건은,

input에 값을 입력했을 때 state도 그때에 맞춰 변화(onChange)하면 된다.

그리고 결국 input의 value와 state의 value가 같아지도록 코드를 작성하면 된다.

function NameForm() {
  const [name, setName] = useState("");

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

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

위 코드는 input 태그에 값이 입력될 때 onChange 이벤트가 발생해

handleChange 함수를 작동시키고 setName에 의해 name(state)이 변화하게 되는 예시이다.

React 데이터 흐름

React 개발 방식의 가장 큰 특징, 페이지가 아닌 컴포넌트 단위로 시작한다는 것.

우선 존재하는 컴포넌트를 찾아 나누고, 그 후 페이지를 조립해 나가며 상향식으로 앱이 작성된다.

(컴포넌트(작은 단위) => 페이지(큰 단위))

React의 이런 특징은 테스트가 쉽고, 확장성이 좋다는 장점이 있다.

때문에 기획자, 디자이너 등에게 전달을 받고 나면,

컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다.

(단일 책임 원칙: 하나의 컴포넌트는 하나의 일만 한다.)

컴포넌트는 props를 통해 데이터를 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.

즉, 데이터를 전달해주는 주체는 부모 컴포넌트, 이는 데이터 흐름이 하향식임을 의미한다.

이 원칙은 React가 단방향 데이터 흐름(one-way data flow)이라는 것을 의미한다.

또한 component는 props를 통해 전달 받은 데이터의 출처를 전혀 알지 못한다.

그리고 이러한 데이터 흐름과 관련해 state(상태)는 너무 많아서 좋을 것이 없다.

state가 많아질수록 어플리케이션은 복잡해진다.

state로 두어야 하는 조건을 살펴보자.

• 부모로부터 props를 통해 전달 된다면 확실히 state가 아니다.
• 시간이 지나도 변하지 않는다면 확실히 state가 아니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하다면 state가 아니다.

만약 다수의 컴포넌트가 하나의 상태(state)에 영향을 받는다면,

그 상태는 다수의 컴포넌트를 모두 아우르는 공통 부모 컴포넌트에 위치해야 한다.