항해99 - Day 28 [WIL]

이번 한 주는 조금은 바빳던 거 같다.

화요일까지는 그냥 가볍게 강의 한두개씩 들으면서 설렁설렁 공부했는데, 목요일부터 다시 공부에 집중이 붙기 시작해서 토요일까지 꽤 열심히 공부했다.

 

우선, 노마드코더 리액트 마스터 클래스 강의를 한챕터 들었고, 사이드 프로젝트를 조금 작업했다.

그리고 금요일부터 새로운 과제가 나오자 바로 작업을 시작했다.

이번주차 과제는 꽤 어려운 것 같아서, 금토 동안 꽤나 작업을 했음에도 (조금 느슨하게 하긴 했지만) 불구하고 아직 완성을 못했다.

오늘 내로 완성하는게 목표인데, 가능할지는 모르겠다.

 

왠지 기억상으로는 바빳던 거 같은데 이번주에 뭐 공부 했는지 기억 안나는거 보면 별로 안했나보다.

담주부터는 이제 미니 프로젝트가 시작되니 바쁠테니 그때부터는 뭐라도 쓸게 있겠지...?

 

라이프 사이클

클래스형

위 그림을 보면, 클래스 방식으로 리액트 컴포넌트를 만들 때 그 컴포넌트의 여러 메소드 들이 어떤 순서로 호출되는가를 보여준다.

시작점에서 시작하여 componentWillMount() 라는 메소드는 리액트가 그 컴포넌트에 구현되어있는 메소드를 호출하는 것으로 약속되어있다. 어떤 컴포넌트가 생성되기 전에 처리해야 할 일이 있다면, componentWillMount()라는 메소드를 구현하는것을 통해서 (컴포넌트가 우리가 필요로 하는 코드를 갖다놓는 과정을 통해서) 컴포넌트가 생성되기 직전에, 즉 랜더가 호출되기 전에 해야될 일을 갖다놓을 수 있다.
이후, Render()메소드가 호출되면 마운트가 된다. 즉 화면에 그려진다.
그 다음에 해야될 일이 있다면, componentDidMount() 라고 하는 메소드를 컴포넌트가 생성된 후에 해야 될 일을 처리할 수 있게 할 수 있다.

 

함수형

useEffect 라는 React Hook을 사용하여 렌더가 완전히 끝난 다음, useEffect 의 인자로 전달 된 함수가 랜더가 끝난 다음에 호출되도록 약속되어있다.

useEffect 라고 하는 hook 은 웹페이지가 처음으로 렌더가 끝났을 때 실행되고, 컴포넌트가 업데이트 될 때마다 실행되는것으로 보아 이게 클래스형에서 componentDidMount, componentDidUpdate 와 똑같은 효과를 내는것이 useEffect라는 것을 알 수 있다.

useEffect 라는 말은 side Effect 가 생갹된 말이다.

 

훅이란?

기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다.또한 훅은 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 하였다.

 

 

출처1: https://velog.io/@ireneeming/WIL-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-vs-%ED%95%A8%EC%88%98%ED%98%95-react-hooks

[WIL] 라이프사이클(클래스형 vs 함수형), react hooks

 

출처2: https://velog.io/@picapipicca/React-Hooks-%EB%9E%80

라이프 사이클 (클래스형 vs 함수형)-2 : React Hooks 란?