TIL - 2022.01.17 월요일

오늘 배운 것

---

- 오늘은 컴포넌트를 활용해 소스코드를 분리해서 폴더 구조를 정리하고, props를 통해 각각의 컴포넌트간에 정보를 전달하는 방법을 배웠다. 그리고 배운 내용을 활용해서 자유게시판 소스코드를 컴포넌트로 쪼갰다.

 

container / presenter 방식

- 컴포넌트, state, props가 리액트의 핵심이라는 이야기를 몇차례 들었기 때문에 컴포넌트 구조에 대해 내 나름 상상하는 바가 있었다. 나는 컴포넌트로 웹페이지의 시각적인 요소들만 분리해서 사용한다고 생각했다. 모든 페이지에 공통으로 들어가는 네비게이터, 메인 배너, 자주 사용하는 유닛(button, input, span) 등을 미리만들어놓고 import 하는 방식을 상상했던 것. 그런데 실제로 배워보니 시각적인 요소 뿐 아니라 기능적인 요소까지 모두 분리해서 정리하는 방식이라 신기했다.

- 상단의 폴더 트리만 봐도 페이지 컴포넌트 내 요소들의 기능별로 다 분리되어 있는 것을 알 수 있다.

presenter(JSX) / container(Javascript) / queries(Quiery) / styles(Emotion) 

- 이러한 폴더 분류법은 명확한 표준이라는게 없고 회사마다 팀마다 다르다고 한다. 큰 프로젝트를 진행하면 진행할수록 초반에 프로젝트 폴더 트리를 잘 짜는게 중요하겠구나 싶다. 잘 짜인 폴더트리와 더럽게 짜인 폴더트리 사이에는 어마어마한 효율성의 차이가 있을 듯. 이런것까지 다 고려해서 기획을 한다고 상상해보면, 기획 단계에서 품과 에너지가 많이 들어가는것도 당연한 일이라는 생각이 든다.

---

- 컴포넌트를 분리하며 문제가 발생했다. 함수를 정의하는 영역과 그 함수가 사용되는 영역이 서로 다른 파일에 담겨 쪼개져버린 것. 이 때 필요한 것이 props다. props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수를 뜻하는 것으로, props라는 객체 안에 함수나 state같은 데이터를 담아 자식 컴포넌트에게 전달할 수 있다.

 

이런 식으로 props를 통해 전달이 가능!

- 단, 주의해야 할 점. 리액트는 단방향 데이터 흐름을 가지고 있다.

- 단방향 데이터 흐름이라는 것은, 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있다는 뜻이다. 얼핏 불편해 보일 수 있지만, 오히려 단방향 구조이기 때문에 데이터의 흐름을 파악하기 쉽고 유지보수도 편리한 장점이 있다. (번외! 앵귤러는 데이터 흐름이 양방향 구조라고 함.) 몇 번 컴포넌트 쪼개는 작업을 해보니까 대충 이해가 간다. 양방향이었으면 진짜 헷갈렸을텐데 단방향이라 오히려 더 쉽게 이해한 듯.

 

- 옵셔널 체이닝, 삼항연산자, 조건부 렌더링은 아직 조금 헷갈린다. 쓰여진 코드를 이해할 수는 있는데, 내가 능동적으로 사용하긴 아직 너무 멀고 낯선 그대임.. 이건 여러가지 경우의 수를 콘솔에 쳐보며 익혀야겠다.

 

 

앞으로 할 것

---

- 옵셔널 체이닝, 삼항연산자, 조건부 렌더링 이해하기! 블로그에 포스팅하면서 좀 더 봐야겠다.

- 기존 html 방식에서 하던대로 하니까 자유게시판 radio 버튼의 값이 제대로 안 나오더라. 페이지가 렌더링되기는 하는데 콘솔에 시뻘건 에러가 막 나옴.. 무서움.. 찾아보니 props를 이용하면 어떻게 할 수 있는 모양이던데. 내일 오전에 좀 살펴봐야겠다. (스택오버플로우 관련글 일단 링크해둠)

https://stackoverflow.com/questions/27784212/how-to-use-radio-buttons-in-reactjs

How to use radio buttons in ReactJS?