라이프 사이클(life cycle)
리액트는 컴포넌트 기반의 view를 중심으로 한다.
라이브러리, 프레임워크 사이가 조금 애매하지만 지금 내가 알고있는 지식으로는 프레임워크에 가까움을 느낀다.
무튼 컴포넌트에는 수명주기(라이프사이클)가 존재하는데 수명은 보통 페이지에서 랜더링 되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.
생성-마운트(Mount) : constructor, render, componentDidMount
수정-업데이트(Update) : render, componentDidUpdate
삭제-언마운트(UnMount) : componentWillUnmount
업데이트는 4가지 상황에 따라 변경된다.
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리랜더링 될 때
4. this.forceUpdate로 강제로 랜더링을 트리거 할 때
클래스형 컴포넌트 기본구조 - 함수형 컴포넌트 기본구조
클래스형 컴포넌트는 render()함수를 사용해서 리턴안의 코드를 랜더링한다.
함수형 컴포넌트는 자신이 랜더함수이기 때문에 랜더는 사용하지 않고 리턴에만 값을 부여한다.
출저 - https://codechasseur.tistory.com/98
Lifecycles in Functionl Components (함수형)
함수형 컴포넌트에는 '리액트 훅'이 있는데 훅으로 함수형 컴포넌트들을 관리한다.
클래스형 라이프사이클에 나왔던 모든 단계(생성~수정~삭제)는 useEffect Hook에 의해 실행된다.
Hook 종류
useEffect
-componentDidMount
-componentDidUpdate
-componentWillUnmount
하나의 API로 통합된 것이다.
useState
state와 setState로 나누며 초기값을 받고 해당 초기값은 처음 랜더링시에만 사용한다.
Hook 사용 규칙
- 훅은 오직 리액트 함수 내에서만 사용되어야 하며 일반적인 javascript 함수에서는 호출하면 안된다.
- 리액트 함수 최상위에서 호출해야한다.
useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.(=LinkedList)
근데만약 조건문이나 반복문안에 혹을 썼다면 조건에따라 실행되지 않을 수도 있다.
출저 - https://velog.io/@picapipicca/React-Hooks-%EB%9E%80
그렇다면 왜 굳이 잘쓰고 있는 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야 할까?
리액트를 배우는데 있어 클래스는 큰 진입장벽이다. 코드의 재사용성과 코드 구성을 어렵게 만들고 this의 사용이나 이벤트 핸들러의 등록등 기본적인 js문법 사항을 알아야 다룰 수 있기 때문이다.
1. 클래스 문법이 어렵다.
2. 축소가 어렵다.
3. reloading의 신뢰성이 떨어진다.
4. 최신 기술의 적용이 효과적이지 않다.
느낀점
난 지금 2021년 말부터 개발관련 공부를 하게 되었는데 예전 기술들과 문법을 익히게 됐다면 진입하는데 큰 장벽을 느꼈을 것이다.
물론 지금도 장벽이 크지만 리액트 클래스형 컴포넌트를 보면 이건 차이가 심하다.
늦은나이인 만큼 배움이 늦었다고 생각이 들기도 하나 더 편하고 쉬운 것들이 등장하는 것을 보면 그나마 낫다는 위안을 하기도 한다.
리액트 심화주차 회고
wil에도 작성했듯 갑자기 어려워졌다고 느껴지는게 상당히 많다.
아직 강의 영상을 다보고 작성하는것이 아니라 앞으로 더 많은 개념들이 나올거로 예상된다.
다만 이 기능을 자주 써봐야 내손에 익고 이것을 활용할 것 같은 느낌은 자주 받는다.
솔직히 아직도 컴포넌트를 나눈다음 합치는 뷰까지는 내손으로 해보겠는데 기능구현에는 막막함이 앞을 가리지만..
반복숙달 되야 취업 후 리액트 사용 가능자라고 당당하게 말할 수 있을것이다.
강의는 버전이 달라 진행이 어려움이 있지만 그래도 강의인만큼 쭉 진행하며 도움받고 내것으로 습득하겠다.
리액트 입문 단계부분은 지금 나한테 익숙한 개념들이라 편해진 것처럼
현재 배우고있는 심화 단계도 몇달뒤 혹은 며칠 후에 나에게 편해질것이다.
화이팅하자.
