props와 state

React 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 만들고 조립하는 상향식(bottom-up) 특징을 가지고 있다. 이는 테스트가 쉽고, 확장성이 좋다.  따라서, 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 컴포넌트는 단일 책임 원칙으로, 하나의 컴포넌트는 한가지 일만 해야한다.

 

이전 글에서 작성했던 컴포넌트에 대한 보충을 하자면,

→ 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받는다.

→ 데이터를 전달하는 주체는 "부모 컴포넌트"이다.

→ 데이터의 흐름은 하향식 (top-down)이다.

→ 단방향 데이터 흐름(one-way data flow)을 가진다. 오직 아래의 컴포넌트에만 영향을 미친다.

→ 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.

props

→ 속성의 나타내는 데이터이다.

→ React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 찾으면, JSX 어트리뷰트와 자식을 해당 컴포넌트에 전달되는 단일 객체이다.

→ props를 사용하여 컴포넌트를 여러 개의 작은 컴포넌트로 나눌 수 있다.

→ props는 읽기 전용이다. 컴포넌트의 자체 props를 수정하면 안된다.

→ 자신의 props를 다룰 때 반드시 순수 함수처럼 동작한다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

이 코드를 읽어본다면 props에 대해 이해하기 쉽다.

※ 컴포넌트 이름은 항상 대문자

 <div /> 소문자로 시작하는 컴포넌트는 DOM태그로 처리

 <Welcome />대문자로 시작하는 컴포넌트는 컴포넌트를 나타내고, 범위 안에 Welcome 이 있어야한다.

state

→ props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.
→ 컴포넌트 안에서 관리된다.

→ 직접 state를 수정하면 안된다. setState()를 사용한다. this.state를 지정할 수 있는 곳은 constructor이다.

→ state 업데이트는 비동기적일 수도 있다. 

→ state 업데이트는 병합된다.

→ 데이터는 아래로 흐리기 때문에 부모, 자식 컴포넌트 모두 특정 컴포넌트의 출신이나 상태에 관심 가질 필요가 없다. 이 때문에 state는 로컬 또는 캡슐화라고 불린다. 

→ 부모로부터 props를 통해 전달되지 않는다.

→ 시간이 지나도 변한다.

→ 컴포넌트 안의 다른 state나 props를 가지고 계산이 불가능하다.

 

   props → state로 변경

   ➀ this.props.data → this.state.date 로 변경한다.

   ➁  초기 this.state를 지정하는 class constructor를 추가한다.

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

   ➂ ReactDOM.render(<Clock />) 요소에서 date prop을 삭제한다. (공식문서 예제 참고)

 

→ 생명주기 메서드를 추가해 해당되는 메서드 안에 코드를 작성한다면, 일부 코드를 동작하게 작성할 수 있다.

→ React v16.8버전부터 Hook 이라는 새로운 요소가 추가되어 Class를 바탕으로 코드를 작성할 필요 없이 상태값과 여러  기능을 사용할 수 있다. 

 

※ 함수에서 클래스로 변환하기 

➀ React.Component를 확장하는 동일한 이름의 ES6 class를 생성한다.

➁ render()라고 불리는 빈 메서드를 추가하고. render(){함수 내용} 을 안으로 옮긴다.

➂ render() 내용 안에 있는 props를 this.props로 변경한다.

➃ 남아있는 빈 함수 선언을 삭제한다.

→ 단일 인스턴스만 사용하기에 로컬 state와 생명주기 메서드와 같은 부가적인 기능을 사용할 수 있게 해준다.

---

Ref.

◾️  props, React 공식 문서( https://ko.reactjs.org/docs/components-and-props.html )

◾️  state, React 공식 문서 ( https://ko.reactjs.org/docs/state-and-lifecycle.html )