[리액트] 컴포넌트와 props ~ 상태 끌어올리기

컴포넌트와 props를 다시 배워보니...

복습할 겸 다시 공부를 해보니 렌더링 영역(최상단 부모 컴포넌트)에서는 실제로 보여지는 데이터를 props로 넘겨주는 역할, 컴포넌트(자식 컴포넌트) 정의 영역에서는 넘겨받은 데이터를 가공한다고 생각하니까 이해하기 쉬웠던 것 같습니다. 부모에서는 데이터를 넘겨주고, 정의된 자식 컴포넌트에서는 데이터를 처리한다!

스타일링은 그때그때 알맞게 사용하자

강의에서는 리액트 컴포넌트 스타일링에 대해 1. 인라인 스타일링 2. emotion 3. styled-components 4. tailwind(테일윈드) 이렇게 4가지에 대해 소개하고 있습니다. 이중에서 저는 인라인 스타일링과 styled-components를 사용해보았는데요. 최근에는 emotion을 많이 사용한다고 해서 개인 프로젝트에 적용하고 싶다는 생각을 했습니다. 스타일링 방법마다 조금씩 장단점이 있기 때문에 프로젝트 성격에 따라 유연하게 적용하면 될 것 같습니다.

상태 끌어올리기... 그때 제대로 알았다면 좋았을텐데

혼자 개인프로젝트를 만들다가, 하위 컴포넌트에서 선언한 상태(state)를 또다른 하위 컴포넌트에서 사용할 일이 있었습니다. 우선 리액트는 단방향 데이터 흐름을 지향하고 있기 때문에 하위 컴포넌트끼리 주는 것은 불가능하다는 것을 알고 있었는데요. 그래서 구글링했을 때 '상태 끌어올리기'라는 개념을 접했습니다. 그런데 저는 그당시 (어디서 들은거 있어가지고...) 상태관리 라이브러리인 Redux만이 유일한 방법이라고 생각했습니다. 곰곰이 생각해보면, 제가 참고하던 책이나 강의에서는 상태 끌어올리기에 대해 설명한 적이 없고 바로 리액트에 대해 소개를 해서 그런 것 같습니다.

 

하위 컴포넌트의 이벤트에 의해서 부모 또는 또다른 하위 컴포넌트의 데이터에 영향을 줄 때, 1. 상위 컴포넌트에서 해당 상태를 선언하도록 하고, 2. 상위 컴포넌트에서 선언한 상태 또는 이벤트 핸들러를 props로 전달해줄 수 있다는 것을 이번에 새롭게 알게 되었습니다. 그동안 Redux로만 상태를 관리할 수 있다고 생각했는데, 이렇게 다양한 강의와 자료를 접하면서 미처 알지 못했던 부분들을 채우는 좋은 경험이 되었습니다.

https://bit.ly/3J16Oaq

[TIL] 항해일지 35일차 - 하나몬

---

인프런의 유료 강의 <만들면서 배우는 리액트: 기초>를 수강하고 작성하는 글입니다.

https://bit.ly/3HwASe0

만들면서 배우는 리액트 : 기초 - 인프런 | 강의

강의 수강 이유, 장점

리액트를 처음 사용하는 것이 아님에도 불구하고, 사용하면 할수록 헷갈리고 익숙하지 않을 때가 많아서 강의를 결제해 수강해보았습니다. 구글링과 삽질이 개발자의 미덕(?)이라고는 하지만 이제 막 배우는 단계에서는 실무를 잘 아는 강사님의 영상 자료를 보면서 익히는게 처음에 제대로 알아가는 데 도움이 된다고 생각했습니다.

 

이번에 수강한 강의는 기초 학습자를 위한 강의라 이미 알고 있는 내용들도 있었만, 혼자 공부할 때 제대로 알았다면 좋았을 것들, 이를테면 OpenAPI를 사용하는 방법이나 로컬스토리지에 데이터를 싱크하는 방법과 같은 내용을 보충할 수 있어서 좋았습니다. 특히 이런 실무자 강의는 자주 쓰는 단축키나 팁을 알 수 있어서 유용한 것 같습니다.