React Props & State & 컴포넌트 life-cycle

1. Props

props란? 컴포넌트에 전달되는 단일 객체이다.

• 읽기 전용으로, 컴포넌트의 자체 props를 수정해서는 안된다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수(입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수)처럼 동작해야 한다.

컴포넌트 합성

• 여러개를 하나의 컴포넌트에 넣는것

컴포넌트 추출

• 유의미한 값들로 추출해서 새로운 컴포넌트를 만드는것 (재사용성을 높이기 위한 방법중 하나)

2. State

State는 자신의 출력값을 변경할 수 있다.

• 단, 직접 수정하지 않는다.
• State 업데이트는 비동기적일 수도 있다. (순차적으로 동작하지 않을수 있다.)

Class componen

• Class component는 State LifeCycle별로 메소드가 있고, 그것을 통해 state를 관리한다.
• 상태가 바뀌면 리렌더링을 해야하는데 직접 바꾸면 렌더링이 되지 않기 때문에 setState를 사용한다.

Functional component

• Functional component는 Class component와 같은 동작을 할 수 있다.
• 훅(Hook)을 사용하여 state를 관리한다.

3. 컴포넌트 생명주기

• 컴포넌트가 생성되고 보여지고 사라지는 과정을 LifeCycle = 생명주기라고 부른다.

주의사항

1. state에 props를 복사하면 안된다.
   버그를 발생시키며, props의 갱신을 의도적으로 무시해야 할 때만 사용하기

2. render( )는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드이다.

constructor는 state 초기화하거나 메서드를 바인딩할 때 사용
componentDidMount는 Dom 노드 초기화 및 데이터 fetch할 때 사용
componentWillUnmount는 타이머 제거, 요청 취소 및 구독 해제할 때 사용
Functional Component에서는 hook으로 대부분 구현 가능