WIL06 리액트 숙련, 심화 과정

리액트 숙련 주차

• 리액트 숙련 과정을 겪으면서 리덕스의 흐름을 이해할 수 있었다.
• 리덕스를 사용함으로써, state를 전역으로 관리해 prop드릴링을 방지하고, 불피요한 렌더링을 줄일 수가 있었다.
• 이와 관련 된 주제로 과제를 진행했고, 큰 어려움 없이 리덕스를 활용한 새로운 Todo List를 구현했다.

리팩터링 과정 중 맞이한 에러

• 하지만 리펙토링 과정에서 반복되는 input창을 줄이고자 커스텀훅을 만들고자 하여 검색을 통해 공부를 했고, 커스텀 훅 만들기를 시도했다.
• 그치만 그 과정에서 에러를 맞이했는데 도무지 해결이 되지 않았다. 커스텀 훅을 통해 넘어온 input 창의 데이터가 초기값이 undifined로 잡혀 에러가 발생했다.
• 에러 당시 TIL
• 위의 TIL 링크에서처럼 검색을 통해 알아낸 해결방법을 통해 처리를 하려했지만 실패했고, 일단 과제 진행을 위해 다른방법으로 과제를 마무리했다.
• 이 부분은 시간을 내서 다시 해결해보아야겠다.

리액트 심화 주차

• 리액트 심화 주차로 들어서니 더 많은 개념이 들어와 머리속이 복잡해지는 느낌이었다.
• 일단 주어진 강의는 모두 챙겨 들었고, 복잡한 머리속을 정리해서, 과제 준비를 해야겠다.

과제 와이어 프레임

• 과제 와이어프레임을 짰고, 기본적인 틀을 짜는 시간을 가졌다.
• 기본적인 틀을 잘 짰는지는 매니져님과 상의를 해봐야겠다.

라이프사이클(클래스형 vs 함수형)

• 모든 리액트 컴포넌트에는 라이프사이클이 있다.
• 생성(Mount) -> 업데이트(update) -> 제거(unmount)의 생명주기를 갖는다.
• 생명주기에 따라 어떤 작업을 처리할지 적절하게 지정해줘야 불피요한 업데이틀 방지할 수 있다.

1. 클래스형 컴포넌트

- 클래스형 컴포넌트는 LifeCycle API를 사용한다. 
- 컴포넌트가 DOM 위에 생성되 전과 후의 데이터가 변경 되어, 상태를 업데이트하기 전과 후로 실행되는 메서드 들이다.

2. 함수형 컴포넌트

- 리액트 Hook을 사용한다. 
- Hook은 state와 생명주기 기능을 연동할 수 있게 해주는 함수들이다.
- 클래스형에서는 동작하지 않는다. 

react hooks

• react 16.8버전에 새로 추가된 기능이다.
• 위의 내용처럼 함수형으로 state와 생명주기 기능을 연동할 수 있게 해준다.
• 훅을 사용함으로써, class component, render 등을 안해도 된다.
• react hook로 함수형 프로그래밍이 가능해진다.