TIL_220725

라이프 사이클 함수로 보는 라이프 사이클

• constructor() : 생성자 함수라고도 부릅니다. 컴포넌트가 생성되면 가장 처음 호출
• render() : 컴포넌트의 모양을 정의하는 친구,
  여기에서도 state, props에 접근해서 데이터를 보여줄 수 있음. render() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 가장 좋음. 즉, state나, props를 건드려 데이터를 수정하려고 안됨
• componentDidMount() : 컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현합니다. didMount()는 마운트가 완료 되었다.
  이 함수는 첫번째 렌더링을 마친 후에만 딱 한 번 실행됨. 컴포넌트가 리렌더링할 때는 실행되지 x
  보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리함.
  또, 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 됨
• componentDidUpdate(prevProps, prevState, snapshot): DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수. 이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState,
  각각 업데이트 되기 전 props, state. 이전 데이터와 비교할 일이 있다면 가져다 쓰도록 합시다.
  DidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 됨!
• componentWillUnmount() : 컴포넌트가 DOM에서 제거 될 때 실행하는 함수.
  만약 우리가 스크롤 위치를 추적 중이거나, 어떤 이벤트 리스너를 등록했다면 여기에서 꼭꼭 해제를 해줘야 함.
  컴포넌트 없이 이벤트만 남겨둘 순 없으니

Component

• State와 Props
  • State : state는 Component가 가지고 있는 데이터
    • state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터
    • 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄짐. 내꺼니까 생성도 수정도 자유
  • Props : props는 Component가 부모 Component로부터 받아온 데이터
    • 변경할 수 없음