처음엔 막막하기만 했던 React
가 친숙해졌다.
이제는 전체적인 데이터 흐름 정도는 어느정도 이해할 수 있게 되었다.
리덕스를 이용해 컴포넌트간의 데이터를 유동적으로 주고 받을 수 있고,
데이터 저장과 같이 브라우저상에서 지속적으로 유지된 상태를 요하는 경우에는
Firebase
를 이용하는 방법까지 학습해보았다.
한창 파이썬을 사용할 때 Flask
를 통해 mongo DB
를 연결했던 것 처럼,
React
에서는 정확히 말하면 Firestore
를 이용해 이같은 로직 구현이 가능했다.
이번 주차 미니 프로젝트로 추가
, 수정
, 삭제
기능을 수행할 수 있는
나만의 단어장을 완성해보았다.
한국어로
생명주기 메서드
라고 하며, 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사리지게 될 때 호출되는 메서드 들이다.
나아가 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다.
생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있고,
함수형 컴포넌트에서 이를 사용하기 위해서는
React Hook
중 useEffect
와 조금 비슷하게 생각 할 수 있다.
(1) 생성(mounting)
constructor
: 컴포넌트가 처음 만들어질 때 실행되는 생성자로 this.props, this.state에 접근할 수 있다.getDerivedStateFromProps
: props에 있는 값을 state에 동기화 시킬 때 사용하는 메서드이다.render()
: UI를 렌더링 하는 메서드이다.componentDidMount()
: 컴포넌트가 첫 렌더링을 마치고 나면 호출되는 메서드 이다.(2) 업데이트(updating)
render()
: 컴포넌트를 리렌더링 하는 메서드이다.shouldComponentUpdate()
: props나 state가 변경되었을 때 리렌더링을 시작할지 여부를 결정하는 메서드이다.componentDidMount()
: 컴포넌트 업데이트 작업이 끝나고 나면 호출되는 메서드이다.(3) 삭제(unmounting)
componentWillUnmount()
: 컴포넌트를 DOM에서 제거할 때 호출되는 메서드이다.리액트훅은
React
v16.8부터 새로 도입된 기능으로 함수형 컴포넌트에서 사용되는 몇가지 기술을 의미한다.
함수형 컴포넌트에서 상태관리를 할 수 있게 해주는 useState
, 렌더링 직후의 작업을 설정하는 useEffect
등의 기능이 제공되고 있는데, 기존에는 클래스형 컴포넌트에서만 사용할 수 있었던 것들을 함수형 컴포넌트에서도 사용할 수 있게 해주는 확장 기능인 셈이다.