4주차는 주특기 숙련 주였는데 숙련 되었는지는 잘 모르겠다..^^
리듀서와 파이어베이스라는 개념을 처음 알게 되었는데 웹종반에서 파이썬 공부를 할 때 정보를 받아오고 게시하는 GET POST 방식이 떠오르면서 머리가 아팠다.
그때 그 과정을 배우면서 더더욱 프론트엔드 개발자가 되어야겠다고 생각했는데 프엔도 비슷한 과정을 할 것이라고는 생각하지 못한 무지한 나의 착각이었다.
제대로 이해하지 못한채 과제를 위한 과제이지 않았나 하는 후회가 깊은 4주차였다.
구현한 기능은 업로드하기, 삭제하기 였고 수정하기는 버튼을 누르면 색이 바뀌는 것까지 밖에 구현하지 못했다. 수정페이지가 되고 싶은 상세페이지는 정보를 index별로 params를 통해 불러오는 것까지는 구현했지만 인풋에 defautvalue라는 것을 알지 못했고 무슨 placeholder타령만 주구장창하다가 제출하게됐다.
저번주는 그래도 useState 라던지 styledComponent, props 등 기초적인 개념을 배우면서 지식 습득을 했다고 느꼈는데 이번주는 생소한 부분이면서 동시에 내가 어려워하는 여기저기 와따가따 멀티..?라서 너무 어렵고 이해하기 어려웠당.. 100중에 20정도 이해한 느낌😢
이번주는 리액트 훅과 라이프사이클에 대해서 간단하게 정리해보고자 한다.
리액트 훅이란?
클래스형 컴포넌트의 기능을 사용할 수 있는 함수형 컴포넌트라고 볼 수 있다.
life-cycle과 state관리 모두 가능하다.
라이프사이클이란?
리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
클래스형 라이프사이클
생성될 때
- constructor()
이 메서드는 컴포넌트가 마운트 되기 전에 호출 된다.
목적은 this.state에 객체를 할당하여 현재 component의 state를 초기화하고, 이벤트를 발생시키는 곳에 이벤트 처리 메서드를 연결하기 위함이다.- render()
render 함수는 유일해야 하며,컴포넌트 생성 시 꼭 필요로 하는 메서드이다.
render()는 순수 함수이다. 그렇기 때문에 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 한다. 브라우저와 직접적으로 상호작용을 하지 않는다. 이 때 필요한 것이 componentDidMount() 같은 생명주기 메서드이다.- componentDidMount()
DOM 트리에 삽입된 직후 즉, 초기 브라우저 화면을 갱신하기 전에 호출 되는 메서드이다.
fetch, 스크롤 이벤트,setInterval 같은 초기에 설정이 필요한 경우 이곳에서 작업을 한다. 만약 스크롤 이벤트,setInterval 를 호출 했다면 componentWillUnmount() 메서드를 통해 해제 작업을 진행해야 한다.
업데이트할 때
- setState(nextState,callback)
컴포넌트의 변경사항을 React에게 알리는 메서드로서 비동기적으로 작업을 수행하는 함수이다.
기본적으로 현재 state를 setState에서 update하려는 nextState를 이용해서 merge하는 동작을 한다.
주로 객체 형태이며 Function형태로도 쓰인다. merge라고 하는 이유는 기존 state 값을 유지하면서 바뀐 state만 변경할 수 있는 객체의 특성 때문이다. 만약 새로운 객체를 추가할 때, 해당 key가 존재한다면 key를 추가하는 것이 아닌 기존 key에서 값이 변경된다.
뒤에 callback은 주로 현재 상태 값이 제대로 바뀌었는지 확인하고 싶을 때 사용한다.
callback은 setState()의 실행이 완료되고 컴포넌트가 다시 랜더링 되고 난 이후 실행된다.
공식 문서에도, callback에서 다음 작업을 진행하기보다는 componentDidUpdate를 사용하길 권장한다.- componentDidUpdate(prevProps,prevState,snapshot)
업데이트가 일어난 직후에 호출되는 함수이다. 최초 랜더링시에는 호출되지 않는다. DOM을 조작할 때 유용하다. 또한 이전,이후의 props를 비교하여 바뀔 경우에만 네트워크 재요청시에도 유용하다.
위 인자중에 snapshot은 getSnapshotBeforeUpdate() 메서드의 리턴 값을 받는 param이다. 없다면 undeifined 처리된다.
제거할 때
- componentWillUnmount()
컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드.
컴포넌트를 DOM에서 제거할 때 실행된다. 위 그림에서 처럼 제거 버튼을 클릭 했을 때 render 메서드가 실행되고, DOM에서 제거 되기 전에 Item 컴포넌트의 componentWillUnmount가 실행되었다.
함수형 라이프사이클
- useEffect
: useEffect 훅을 사용하여 함수형 컴포넌트에서도 life-cycle 함수를 이용할 수 있다.
=> 2번째 파라미터를 주지 않으면 모든 컴포넌트가 리렌더링될 때마다 실행된다.
클래스형 컴포넌트에서의 각각 생명주기 메소드에 대응하는 훅이 존재하는 것은 아니지만 useEffect 훅을 이요하면 비슷한 기능을 한곳으로 모을 수 있어서 가독성이 좋아진다.- useState
클래스형 컴포넌트에서는 상태 설정을 위해 state를 사용했지만, 함수형 컴포넌트에는 state가 없다.
대신 useState라는 Hook을 사용하는데 이는 배열 형태로 사용 가능합니다.
첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿀 수 있는 함수. 또한, 클래스형 컴포넌트에서는 this 키워드가 필요했지만, 함수형 컴포넌트는 그냥 바로 변수를 사용하면 된다.
