[항해99][4주차][WIL] React 숙련 종료, React 심화 시작

React 숙련 주차의 시작

굉장히 힘든 한 주였다. 이해하지 못하고 넘어간 것이 왜 이렇게 많은지 불안한 마음뿐이다.

숙련주차의 과제로 나만의 단어장을 만들어야 했다. 처음으로 리덕스를 사용해 보았고 파이어스토어와 파이어베이스를 사용해 보았다.

리덕스는 후기를 남겨보고 싶은데 이해하지 못한 것이 너무 많아 차차 알아가며 정리할 생각이다. 지금은 내가 뭘 모르는지 뭘 아는지 모르는 상태이기 때문에 정리를 해도 소용이 없을 것 같다.

그나마 React훅 중 하나인 useRef를 아주 약간이나마 이해를 하고 사용해 본 것 같다. e.target.value()와 비슷한 용도로 사용하고 어딘가에 있는 값을 가져올 때 사용한다고 이해하고 있다.

이번 과제물이다. 아쉬운 점이 정말 많다. 삭제, 수정기능을 만들고 싶었지만 시간과 실력의 부족으로 구현하지 못한 것이 아쉽다.

이번 과제 역시 김혜*, 권해*팀원분들의 도움과 여러 타 팀원의 도움으로 마무리 할 수 있었다. 특히 리덕스 create기능 구현에는 안지* 기술매니저의 큰 도움이 있었다. 

 

 

 

 

 

 

 

 

 

 

React 심화 주차의 시작

숙련자로 거듭나지 못했음에도 심화주차라니. 이보시오 매니저양반 내가 심화주차라니! 심화주차라니!

역시 어렵다 구현해야 할 기능이 너무 많고 너무 어려울 것으로 보인다. 다행히 제공된 리액트심화강의를 잘 따라가면 문제가 없을 듯 보인다. 

새롭게 알게 된 것

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

 라이프사이클이란 컴포넌트가 렌더링 되고부터 사라지는 순간까지 즉, 말 그대로 컴포넌트의 생명주기를 뜻한다.

클래스형 컴포넌트에서 사용되는 개념이다.

출처:(https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

위 사진은 클래스형 컴포넌트의 라이프사이클을 표현한 그림인데, 각각 생성, 업데이트, 소멸단계를 보여준다.

하지만 함수형에서는 다른 방식으로 라이프사이클을 표현한다.

(1) 생성

 별도로 React hook인 useEffect를 통해서 라이프사이클 구현이 가능하다.

useEffect(()=>{
  //코드 작성
})

위처럼 라이프 사이클을 생성,

 렌더링이 완료된 후 호출되는 메소드인
componentDidMount()는 아래 예시와 같이 위의 상태에서 2번째 파라미터를 주면 된다(주지 않고 위 상태로 사용 시 컴포넌트가 리렌더링 될 때마다 실행)

useEffect(()=>{
  //코드 작성
},[])

(2) 업데이트

그렇다면 컴포넌트 업데이트 작업 완료 후 실행되는 메소드인 componentDidUpdate() & getDerivedStateFromProps()는?

useEffect(()=>{
  //코드 작성
},[props,state,...])

 위와같이 두 번째 파라미터에준 props, state 등의 명시한 변수가 변경 될 때에 실행되도록 해주면 된다.

(3) 소멸

그렇다면 라이프사이클의 마지막 단계인 소멸은? (componentWillUnmount())

useEffect(()=>{
  //코드 작성
  return()=>{
  //unmount 또는 unsubscribe 코드 작성
  }
},[props,state,...])

위처럼 작성이 가능하다! (필요 없어 졌을 시 return함수를 실행하여 메모리를 반환해버림)

React Hooks

여러 훅들이 있지만 지금까지 많이 사용했고 그나마 이해하고 있는 훅은 useState와 useRef이다.

useState는 컴포넌트의 상태를 관리해주는데 현재의 state를 수정하거나 유지하거나 할 수 있다. 가장 기본적인 카운터를 만들어보며 이해할 수 있었다.

useRef는 자연스럽게 사용하게 된 훅이다. inputbox의 입력값을 가져오기 위해서는 당연하게도 사용하는 것이고 e.target.value()와 같다고 생각하고 있다.