이번 한 주도 어떻게 지나가고있다.. 벌써 일요일이라니!!!!!
아직도 리액트랑 친해지는 중인데, 심화주차가 4일이나 지났다니...
그래도 가끔 개념적인 것들이 어렵고 헷갈리긴 해도 과제 진행하면서 재밌게 하고 있다고 생각했는데, 반복되는 하루하루가 은근 스트레스였는지 이번주 후반부터는 집중력도 많이 떨어지고 쉽게 지쳤던 것 같다. 뭔가 내 멘탈이 개복치가 됐던 것 같은 느낌..?
오늘 나가서 바람도 좀 쐬고 맛있는것도 먹고 놀고 오니까 다시 충전된 것 같아서 다행!!! 하루라도 이렇게 쉴 수 있음에 감사합니다...😂
아무튼 이번주 WIL은.. 리액트 입문부터 숙련까지, 그리고 이번 심화 주차를 지나오면서 계속해서 접하고 리액트를 능숙하게 다루려면 무조건적으로 이해가 필요할 것 같은 Hook과 라이프사이클에대해 정리를 해보겠다.
리액트 Hook
리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트와 같은 기능들을 사용할 수 있도록 도와주는 기능이다. 그렇기 때문에 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능하다.
또한, 훅은 최상위 레벨에서만 호출 가능하다. 즉 반복문, 조건문, 중첩된 함수 내부에서는 호출할 수 없다.
주로 사용되는 React Hook
-
useState: 클래스형 컴포넌트에서만 사용 가능했던 state를 useState훅을 사용해 함수형 컴포넌트에서도 상태 변수를 선언할 수 있다. -
useEffect: 클래스형 컴포넌트에서 쓰이는 라이프사이클을 관리할 수 있다. -
useRef: 인자로 받은 값으로 ref 객체를 반환한다. 이 객체는 컴포넌트의 전 생애주기동안 유지되며, ref.current와 같이 current 속성에 접근하여 현재 가리키는 객체에 접근할 수 있다.
리액트의 라이프사이클
리액트 컴포넌트는 라이프사이클(Lifecycle)을 가진다. 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들인데, 라이프사이클을 다룬다는 것은 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스를 프로그래머가 통제하는 것을 뜻한다.
클래스형 컴포넌트의 라이프사이클
-
Mounting : 컴포넌트가 로드되기 시작하는 시점
constructor: 이 시점에는 브라우저에서 우리가 작성한 JSX가 보이지 않으므로 건드릴 일이 거의 없음
render: JSX가 HTML로 변환되어 브라우저에 보여지는 시점.
render메소드는 컴포넌트가 로딩될 때에도 실행되지만 컴포넌트의 데이터 (state, props)가 업데이트 되었을 때에도 동작하므로 이 때 setState나 props를 변화시키는 기능은 수행하지 않는것을 추천한다.(무한루프 방지)
componenetDidMount: render 메소드에 있는 모든 부분들이 브라우저에 나타나게 되었을 때만 실행되는 메소드로, 컴포넌트의 데이터가 업데이트 되어도 이 메소드는 다시 수행되지 않는다. 오직 초기 컴포넌트의 로딩 이후에 한번만 실행되는 라이프사이클 메소드이며 여기서 DOM을 직접 조작할 수 있다.
-
Updating: 컴포넌트 업데이트
state, props가 변경되었을 때 업데이트가 발생한다. state의 변경이 일어났을 경우 변경된 부분을 다시 그리기 위해
render가 발생하고, 변경 완료된 이후에는componentDidUpdate메소드가 실행된다.
-
Unmounting: 컴포넌트가 삭제되는 시점
componentWillUnmount: 컴포넌트가 삭제될 때에 실행되는 메서드로, 이 때 컴포넌트에 적용했던 이벤트나 변수들을 삭제할 수 있다.
함수형 컴포넌트의 라이프사이클
라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 useEffect Hook을 사용하여 라이프사이클 관리가 가능하다.
useEffect 함수 내에 코드를 작성할 경우, 클래스형 컴포넌트에서 componentDidMount, componentDidUpdate 메소드들과 같은 시점에 이벤트가 실행된다고 보면 된다.
useEffect 함수 내의 실행 순서는 return()=>{} 안의 내용이 먼저 실행되고 나머지 코드들이 실행된다.
useEffect(()=>{ 코드 }) // 제렌더링때마다 코드 실행
useEffect(()=>{ 코드 }, []) // mount시 1회 코드 실행
useEffect(()=>{
return () =>{
코드
}
}, []) // unmount시 1회 실행
useEffect(()=>{ 코드 }, [state]) // state값 변경될 때만 실행
// 공통 : useEffect실행 전 다른 이벤트 먼저 동작시키고 싶다면 return()=>{}안에 작성하면 됨return 함수 자체는 unmount시에만 실행되고, mount시에는 실행되지 않기 때문에 component가 unmount될 때 기존에 등록된 이벤트를 삭제하려면 이 영역에 이벤트 삭제 코드를 작성하면 된다.
