🌊 211003 WIL

리액트 심화반 수강이 쉽지 않다. 용어도 어렵지만 기본적인 이해도 많이 부족한 상태라 단순히 코드만 따라 치는 수준이다. 많이 부족하다고는 생각하고 있었지만 더 노력해야할 필요를 느끼게 되는 시점이다. 팀원 분들도 비슷한 어려움을 겪고 계셨는데, 공부에 도움이 되는 사이트나 정보를 많이 공유 받았다. 매번 느끼는 거지만 함께 공부하는 사람이 있다는 건 정말 큰 도움이 된다. 특히 한 분과는 같은 부분에서 공감을 느껴 많은 대화를 나눴다. 둘 다 자바스크립트 기초에 대한 아쉬움을 갖고 있었는데 진도를 빨리 나가야한다는 생각에 제대로 공부를 하지 못하고 있었다. 미니 프로젝트를 앞두고 기초라도 잘 다져놓자는 다짐과 함께 좋은 자바스크립트 기초 강의를 공유 받았다. 다른 사람들에 비해 늦은 것이 당연한 것인데 너무 강박에 휩싸여 있었던 것 같다. 차근차근 기초를 다지며 다시 항해를 시작해보자..!

이번 주 WIL은 라이프사이클과 리액트 훅이라는 키워드가 주어졌다.

React의 생명 주기(LifeCylclre)

React의 생명 주기는 크게 생성(Mounting), 수정(Updating), 제거(Unmounting) 세 부분으로 나뉜다. 생성은 처음으로 컴포넌트를 불러오는 단계이다. 수정은 사용자의 행동에 따라 데이터가 바뀌거나 부모 컴포넌트가 렌더링 될 때 업데이트 되는 단계를 말한다. 수정 단계는 위 표에서도 볼 수 있듯이 크게 세가지 경우에 일어난다.

• New Props
  props 가 바뀔 때
• setState()
  state 가 바뀔 때
• forceUpdate()
  강제로 업데이트 했을 때

추가적으로 부모 컴포넌트가 업데이트 되었을 때 즉, 리렌더링이 되었을 때 일어난다. 제거는 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계를 말한다.

React에서 공식적으로 함수형 컴포넌트의 사용을 권장하기 이전에는 클래스형 컴포넌트를 주로 사용했었다. 함수형에 비해 코드도 길고 속도도 더딘 클래스형 함수를 쓸 수 밖에 없었던 이유는 함수형 컴포넌트에서는 라이프사이클 함수를 사용할 수 없기 때문이다. 생명 주기 표에서 진하게 표시된 constructor(), render(), componentDidMount(), componentDidUpdate(), componentWillUnmount() 이들을 라이프사이클 함수라고 하는데, 리액트를 이용하여 페이지를 만드는 것에 있어서 없어서는 안되는 기능들이다. 이렇게 중요한 함수들을 함수형 컴포넌트에서는 사용할 수 없었기 때문에 그동안 클래스형 함수를 중심으로 리액트를 써왔던 것이다.

React Hooks

클래스형 컴포넌트보다 효율적인 함수형 컴포넌트를 본격적으로 사용할 수 있게 된 배경에는 바로 Hooks의 등장이 자리하고 있다. 함수형 컴포넌트는 라이프 사이클 함수를 사용할 수 없었기 때문에 state를 가질 수 없었다. 그러나 Hooks의 등장과 함께 클래스형 컴포넌트에서 할 수 있던 것 보다 더 깔끔하고 간결하게 state를 관리할 수 있게 되었다. 아래의 예시를 보면 그 차이를 더 확연하게 알 수 있다.

// 클래스 컴포넌트에서 라이프 사이클 함수를 이용

componentDidMount() {
	this.updateLists(this.props.id)
}
componenteDidUpdate(prevProps) {
	if (prevProps.id !== this.props.id) {
    	this.updateLists(this.props.id)
    }
}

updateLists = (id) => {
	fetchLists(id)
    	.then((lists) => this.setState({
        	lists
        }))
}

// 함수형 컴포넌트에서 React Hooks를 이용
useEffect(() => {
	fetchLists(id)
    	.then((repos) => {
        	setRepos(repos)
        })
}, [id])

3주차 WIL을 마무리하면서...

Hooks는 recompose라는 라이브러리에서 시작되었다고 한다. 이를 React에서 인수하여 다듬어서 나오게 된 것이 React Hooks이다. 내용을 정리하면서 Hooks의 역사도 되짚어 봤는데 역시 집단지성은 대단하다는 생각을 했다. 또한 기술의 발전은 기존 기술의 불편함이나 부족한 점들을 보완하려 할 때 이루어진다는 것도 느꼈다.

이렇게 시시각각 변하는 기술의 발전을 따라가기 위해서는 공부 또한 늦추지 말아야한다는 것도...😇