state 올바르게 사용하기: 3원칙 01 state를 직접 수정하지 않습니다 this.state를 지정할 수 있는 공간은 constructor 뿐입니다.(초기 세팅) 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 합니다. 다음과 같이 쓰여진 코드는 리렌더링 되지 않을 수 있습니다. 대신에, setState를 사용해야 합니다. 02 state 업데이트는 비동기적일 수 있습니다 다음과 같이 props와 기존 state를 한꺼번에 처리하는 경우가 있습니다. this.props와 this.state는 비동기적으로 업데이트 될 수 있기 때문에 객체 형식이 아닌 함수를 인자로 사용하는 형태를 사용합니다. 03 state의 업데이트는 병합됩니다 state는 객체형태로 지정이 가능합니다. 다양한 독립적인 변수를 포함할 수 있는데, 이러한 변수들을 또 독립적으로 업데이트 할 수 있습니다. this.setState({comments})를 진행할 때 this.state.p…

Intro… 리액트의 lifecycle은 세 단계로 구분할 수 있다. 리액트의 각 컴포넌트들은 모두 위의 라이프사이클을 따른다. 우리는 를 이용하여 라이프사이클의 특정 단계에서 원하는 코드를 실행하도록 할 수 있다. 는 돔에 요소들을 넣는 단계다. 는 말 그대로 컴포넌트가 업데이트 되는 단계다. 는 돔에서 컴포넌트가 제거되는 단계다. 자세히 살펴보자. Mounting 컴포넌트의 인스턴스가 생성이 되고 돔에 삽입될 때, 아래의 들은 다음과 같은 순서로 호출이 된다. (클래스형 컴포넌트만 컴포넌트 인스턴스를 가진다. 컴포넌트 클래스 내부에서 this 키워드를 통해 참조하는 대상에 해당) (굵은 글씨의 함수가 자주 쓰이는 함수다.) ⚠️주의UNSAFE_componentWillMount() 함수는 legacy code로 여겨지고 있기 때문에 지양된다. render()함수는 필수고 항상 호출되며, 나머지 함수들은 선택사항이다. constructor() : mount 전에 호출 constuc…