GRIDY

Web Frontend Developer

오늘은 수면 사이클을 좀 조정을 하기 위해 늦게 잤다.

그리고 일어나서 항해 리액트 심화 강의를 1주차부터 3주차까지 들었다.

- 끝 -

오늘의 후기 - 심심하다.

오늘 공부를 꽤 열심히 했다.

아침부터 음악 들으면서 코드도 짜보고 했는데.... 뭔가 심심하다.

우선 오늘 한 것들을 정리해보자면, 사이드 프로젝트 리덕스 코드들을 정리하고, 로그인 회원가입 코드를 작성했다.

이전에 어느정도 해놓긴 했는데, 이번 심화 과정을 거치면서 어느정도 알게 된 것들을 토대로 코드를 재정리했다.

그리고 항해 리액트 심화 과정 강의를 2-7?정도까지 듣고 노마드 코더 강의를 조금 들었다.

내일부터 이제 챌린지 문제가 제공되기 시작할 텐데 벌써부터 어지럽다 ㅠㅠ...

노마드코더, 사이드프로젝트, 과제 코드 리팩토링을 해야 한다.

일단 방금전에는 내일 있을 CS 스터디 발표를 위해 책을 읽으며 내용 정리를 했다.

이걸로 오늘도 끝

29일차는 어제건데 어제는 졸려서 못써서 오늘 쓴다.

어제는 거의 하루 푹 쉬긴 했는데, 그래도 강의를 듣긴 들었다.

스파르타 리액트 심화 강의 1챕을 거의 다 들었고, 노마드코더 강의도 조금 들었다.

노마드코더 강의에서는 상태관리에서 리덕스가 아니라 리코일을 다루는데, 이 리코일을 써보니까 '정말 편하다'라는 느낌을 받았다.

그래서 인터넷에 좀 찾아보았는데, 현업에서는 리코일이 주가 된다고 한다.

그래서 최종 프로젝트 때에는 리코일을 쓰자고 하려고 생각중이다.

30일차인 오늘은 어제 설렁설렁한 공부에 약간 현타와서 초심으로 돌아가 제대로 공부해보려고 생각중이다.

그리고 코드리뷰도 받고 싶기 때문에 이번주에는 코드를 조금 깔끔하게 정리를 해야겠다.

아래는 어제 완성한 5주차 과제이다.

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

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

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

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

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

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

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

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

라이프 사이클

클래스형

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

시작점에서 시작하여 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

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