[리액트를 다루는 기술] TIL-129

  오늘은 리액트 반복문과 리액트 라이프사이클 메서드들에 대해서 공부했다. 데브코스를 통해서 기본적으로 컴포넌트를 만드는 것들을 배우고는 있지만 기본적인 내용을 알고 사용하는게 굉장히 중요하다고 생각하기 때문에 별도로 공부를 하니 생각보다 시간이 부족ㅎ하지만 ㅠㅠㅠ 그래도 절대 빠져서는 안되는 과정이라고 생각한다. 기본적인 개념들에 대해서는 정리를 해보았다. 

 

2022.12.23 - [📚 Language & CS knowledge/React] - 컴포넌트 반복

컴포넌트 반복

 

2022.12.23 - [📚 Language & CS knowledge/React] - 컴포넌트의 라이프사이클 메서드

컴포넌트의 라이프사이클 메서드

 

  반복과 관련해서는 리다기를 읽기 전 인프런 강의와 데브코스 강의를 통해서 익숙하게 사용해 왔던것 같다. 하지만 그 이유에 대해서는 정확하게 알고 사용한것은 아니었다. 그런데 이제는 이해가 되기 시작하는것 같다. 기본적으로 JSX 문법에서 { } 내부에는 표현식을 사용해야 한다. 즉 값으로 평가될 수 있는 문을 사용하거나 값을 전달해야 하기 때문에 여러문으로 이루어진 for문과 같은 반복문은 활용이 불가능하다. 또 리액트에서는 불변성을 유지하는것이 상당히 중요하다는것을 알게 되었다. 흔히 리액트, 가상돔은 리액트에 대해서 공부를 시작하면 가장 먼저 듣게되는 말이다. 이 가상돔을 통해서 업데이트되기 이전의 돔과 비교를 통해서 리렌더링 횟수를 최소한으로 줄이기 위해 리액트는 동작한다. 

  

  여기서 비교가 이뤄진다는 점이 중요한데 불변성을 유지해서 데이터를 업데이트할 때는 항상 새로운, new 값을 넣어주어야 비교를 통해 최적화를 할 수 있게 되는것이라는 생각이 들었다. 그런 의미에서 map() 메서드는 반복을 통해 새로운 배열을 만들어 내기 때문에 불변성을 유지시킬 수 있는 고차 함수이다. 또 filter()와 같은 메서들도 데이터를 업데이트할 때 리액트를 사용할 때 매우 유용하고 편리하게 코드를 작성할 수 있게 도와주는 고차 함수들이다. 이를 자유자재로 활용하는 것이 매우 중요할 것 같다. 

 

  그리고 두 번째로 라이프사이클에 대해서 배웠다. 사실 라이프사이클이라는 개념은 데브코스를 통해 짧게나마 Vue에 대해서 공부한적이 있는데 이때 처음 알게 된 개념이었다. 물론,,, 그 당시에는 처음 듣기도 했고 너무 짧은 기간에 많은것들을 배웠기 때문에 대충 이해하고 넘어갔던것 같다. 하지만 리액트에서도 동일한 개념이 있었고 책을 통해서 라이프사이클이 무엇인지 알 수 있었다. 말 그대로 컴포넌트의 생명 주기이고 각 시기별로 사용할 수 있는 함수들이 존재하는 것이었다. 리액트의 경우에는 class 컴포넌트에만 라이프사이클 메서드가 총 9개 존재하고 함수 컴포넌트의 경우에는 라이프사이클 메서드가 별도로 존재하지 않는다. 하지만 Hooks를 통해 비슷하게 구현할 수 있는 것으로 알고있다. 대표적으로 useEffect로 알고 있다. 

 

  현재는 구체적으로 componentDidMount, componentDidUpdate, componentWillIUnmount, 그리고 shouldComponentUpdate 정도만 언제 활용하면 좋은지 대략적으로 알게 되었다. 지금은 컴포넌트를 만들때 함수형으로 많이 연습하고 있어서 class 컴포넌트 자체가 엄청 익숙한 상태는 아니지만 class 컴포넌트를 통해 알게된 것들을 함수 컴포넌트와 비교해보면서 동일하거나 비슷한것들을 확인한다면 훨씬 효과적으로 공부할 수 있는것 같다. 

 

 

오늘을 마무리하며... 너무 졸린 관계로 한 문장으로 정리해보겠다 '갈 길이 멀다'...