과제 📚
나만의 사전 만들기
-
진짜 충격적이다 TIL 좀 열심히 써야지...
-
이번 과제는 그래도 예제 사이트 소스코드보단 스스로의 힘+다른 사람의 도움으로 많이 해결했다. 예제는 어떤 식으로 구현했지...? 하는 호기심에 몇 번 들여다보긴 했는데 저번 과제처럼 샅샅이 훑어보고 그대로 작성하는 일은 없었다! (물론 강의에 대부분 있는 내용이기도 했지만 ㅎㅎ...)
-
심화 주차에 들어오니 또 별세계 같다... 2주 차 강의부터 하나도 이해가 안 돼서 또 지지부진하는 중이다. 3주 내내 실전 프로젝트는커녕 미니 프로젝트 때 사람 구실은 할 수 있을지만 고민하고 있다...
-
이번 과제의 목표는 컴포넌트를 열심히 쪼개보는 것! 모듈화에 좀 더 익숙해지고 싶다.
Life Cycle
간단하게 말하자면 컴포넌트가 렌더링을 준비하는 과정부터, 페이지에 표시되었다가 다시 페이지에서 사라지게 되는 과정까지를 life cycle이라고 한다.
- Mount : DOM이 생성되고 브라우저 상에 나타나는 것
- Update : props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 다시 렌더링 되었을 때, force update로 강제 렌더링 될 때 발생한다.
- Unmount : 이름 그대로 DOM에서 제거되는 것.
＞ Class형 컴포넌트
class형 컴포넌트는 라이프 사이클 메서드를 사용해 컴포넌트를 구현한다.
constructor() {
컴포넌트가 처음 만들어질 때 실행되는 constructor(생성자)이다. 이 메서드에서 초기 state를 결정할 수 있다.
}
render() {
가장 중요한 메서드. null을 입력하는 한이 있어도 반드시 넣어야 하는 필수적은 메서드.
}
componentDidMount() {
컴포넌트의 첫 렌더링 이후 호출된다.
DOM의 속성을 읽거나, 직접 변경하는 작업을 할 수 있다.
}
componentDidUpdate() {
리렌더링을 완료해 화면이 업데이트된 이후 호출된다.
컴포넌트가 업데이트되었을 때, DOM을 조작할 때 활용할 수 있다.
}
componentWillUnmount() {
컴포넌트를 DOM에서 제거할 때 실행한다.
컴포넌트가 화면에서 Unmount 되는, 즉 사라지는 것을 의미하며, mount 단계에서 등록한 이벤트가 있다면 여기서 제거해야 한다.
}
＞ 그렇다면 함수형 컴포넌트는?
함수형 컴포넌트는 라이프 사이클 메서드를 사용할 수 없지만, useEffect 등의 훅을 사용해 동일하게 구현할 수 있다.
🌐 리액트 공식문서(Hook)
https://ko.reactjs.org/docs/hooks-intro.html
🌐 useEffect 완벽 가이드
https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko
＞ 그럼 뭘 써야할까?
리액트는 Hook이 등장한 이후로는 함수형 컴포넌트를 사용하길 권장하고 있으며, 실제로 과거와는 달리 훅을 사용해 클래스형 컴포넌트의 기능들을 대부분 구현할 수 있게 되었기 때문에 장점이 훨씬 많은 함수형 컴포넌트를 사용하지 않을 이유가 없어졌다.
https://velog.io/@greeneryyyyy/React-Cycle-Method
https://velog.io/@greeneryyyyy/TIL-d13
