🚢 항해99 4주차 회고

처음엔 막막하기만 했던 React가 친숙해졌다.
이제는 전체적인 데이터 흐름 정도는 어느정도 이해할 수 있게 되었다.

리덕스를 이용해 컴포넌트간의 데이터를 유동적으로 주고 받을 수 있고,
데이터 저장과 같이 브라우저상에서 지속적으로 유지된 상태를 요하는 경우에는
Firebase를 이용하는 방법까지 학습해보았다.

한창 파이썬을 사용할 때 Flask를 통해 mongo DB를 연결했던 것 처럼,
React에서는 정확히 말하면 Firestore를 이용해 이같은 로직 구현이 가능했다.

---

이번 주차 미니 프로젝트로 추가, 수정, 삭제 기능을 수행할 수 있는
나만의 단어장을 완성해보았다.

---

📕 LifeCycle 이란? (class형 컴포넌트 기반)

한국어로 생명주기 메서드라고 하며, 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사리지게 될 때 호출되는 메서드 들이다.

나아가 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다.

생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있고,
함수형 컴포넌트에서 이를 사용하기 위해서는
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 Hook(함수형 컴포넌트 기반)

리액트훅은 React v16.8부터 새로 도입된 기능으로 함수형 컴포넌트에서 사용되는 몇가지 기술을 의미한다.

함수형 컴포넌트에서 상태관리를 할 수 있게 해주는 useState, 렌더링 직후의 작업을 설정하는 useEffect등의 기능이 제공되고 있는데, 기존에는 클래스형 컴포넌트에서만 사용할 수 있었던 것들을 함수형 컴포넌트에서도 사용할 수 있게 해주는 확장 기능인 셈이다.