[react] 노마드코더 영화웹서비스 제작 3.2 컴포넌트의 생명주기 메서드

unu·2021년 5월 28일

[React] NomadCoders 영화 웹서비스 제작

목록 보기

12/25

react component에서 사용하는 유일한 function은 render function이지만, 그외에도 많은 것들을 가지고 있다.

life cycle method라는 것들을 가지는데, 리액트가 컴포넌트를 생성하고 없애는 방법이다.

component가 생성될 때,
render 전에 호출되는 function이 있으며
render 후에 호출되는 function들이 있다.
또한 예를 들어 add +1, +1하고 component가 업데이트 됐을 때 호출되는 function이 있다.

우리가 모든 것을 살펴볼 수는 없고, 중요한 것들을 살펴보려고 한다.

아래의 메서드는 하나의 컴포넌트가 탄생되고 돔에 삽입되었을 때, 이하의 순서대로 호출된다.

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Note:
These methods are considered legacy and you should avoid them in new code:
- UNSAFE_componentWillMount()

constructor는 리액트는 아니고 자바스크립트에서 클래스를 만들 때 호출되는 것이다. 컴포넌트가 마운트 될때, 스크린에 표시될 때, 내 웹사이트에 들어갈 때, constructor를 호출한다.
ex)

  constructor(props){
    super(props);
    console.log("hello")
  };
  render(){
    console.log("render");
    .
    .
    };

constructor()가 hello를, render()가 render를 기록하도록 했다.

콘솔을 보면 hello가 먼저 기록되어있다. constructor가 먼저 실행된다는 뜻.

특별한 언급이 없는 대신 공홈 설명으로 대체

render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드입니다.

이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것 중 하나를 반환해야 합니다.

React 엘리먼트. 보통 JSX를 사용하여 생성됩니다. 예를 들어,
와 는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하는 React 엘리먼트입니다.
배열과 Fragment. render()를 통하여 여러 개의 엘리먼트를 반환합니다. 자세한 정보는 Fragments 문서를 통하여 확인할 수 있습니다.
Portal. 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링합니다. 자세한 정보는 Portals에서 확인할 수 있습니다.
문자열과 숫자. 이 값들은 DOM 상에 텍스트 노드로서 렌더링됩니다.
Boolean 또는 null. 아무것도 렌더링하지 않습니다. (대부분의 경우 return test && 패턴을 지원하는 데에 사용되며, 여기서 test는 boolean 값입니다.)

render() 함수는 순수해야 합니다. 즉, 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용을 하지 않습니다.

브라우저와 상호작용하는 작업이 필요하다면, 해당 작업을 componentDidMount()이나 다른 생명주기 메서드 내에서 수행하세요. render()를 순수하게 유지하여야 컴포넌트의 동작을 이해하기 쉽습니다.