프리온보딩 FE 챌린지, 클린코드(4)

또 어느새 2주가 지난 클린코드 프리온보딩 챌린지도 끝이 났다.
정말 시간이 지날수록 강의질이 점점 높아지길래 놀랬다..

오늘은 리액트의 코드를 보며 문제상황에 대해 얘기해보는 시간을 가졌다.

정말 유료강의 같은 무료강의였다. 오늘도 주요한 부분들 위주로 정리해 보려 한다.

 

플래그 값

요즘 영화나 드라마를 보면 인물들이 대사로 복선을 만들어 죽는 장면이 나오는 걸
"사망 플래그"라는 말을 자주 하는데 여기서 나오는 플래그 클리셰의 하위 개념으로

복선을  의미한다고  함! 아무튼  이것을 프로그래밍에서는 올라가고 내려가는 깃발의 

형태에서 유래했다고 한다. 리액트에서 사용되는 플래그 값 코드이다! 

(내가 많이 사용하는 코드이기도 하다)

강의에서는 이러한 값들은 리액트에서도 지양하고 권장하지 않는다고 한다?..

그래서 이러한 플래그 값들을 제어할 때는 아래 따로 컴포넌트를 분리해서 관리하는 방법도 있다!

이러한 방법도 정말 좋은 방법인지는 잘 모르겠지만 좋은 방법을 찾을 때까지 공부해 봐야겠다.

리액트 컴파운드 패턴

 

리액트에서 화두가 되고 있다는 디자인 패턴 컴파운드 패턴과 합성 컴포넌트 대한 얘기를 해주셨다.

리액트를 어떻게 재사용성 있게 만들 것인가에 대한 주제였다.

 

 

아직 나는 컴파운드 패턴에 대한 이해가 부족해서 공부가 더 필요할 것 같지만 

chat gpt를 통해 예시코드를 가져와보았다. 해당 코드에서는 TabContainer부모에서
공통 상태들과 함수들, children을 통해 전체적인 레이아웃을 잡고 있다.

하는 일과 관심사를 분리해서 자식 컴포넌들을 생성하여 

Tab, TabPanel에서는 context 상태에서 필요한 상태들을 가져와서 사용하고 있다.

코드에도 그렇고 강의에서도  공통적으로 children을 잘 사용하는 게 중요해 보인다.

children의 사용 예시와, 고차 컴포넌트, 관심사 분리등 좀 더  공부가 필요할 것 같다.

https://www.patterns.dev/react/compound-pattern

https://iyu88.github.io//react/2023/03/25/react-compound-component-pattern.html

https://ko.legacy.reactjs.org/docs/higher-order-components.html

함수로 컴포넌트 생성

 

해당 코드를 보면 컴포넌트 안에서 JSX를 리턴하는 함수를 생성하여 그 함수를 호출하여

JSX를 리턴하고 있다. 이러한 코드는 지양하는 게 좋을 것 같다는 얘기를 해주셨다.

해당 부모컴포넌트에서 JSX리턴하는 코드를 보면 해당 함수가 컴포넌트 함수라는 것을 유추해 볼 수 있지만
함수를 호출하는 곳에서는 해당 함수가 무엇을 하는 함수인지 유추하기 힘들다.
결국 return 부분에서 해당 함수가 값으로 평가되어 해당 함수가 실행될 수 있지만 이러한 코드는

혼돈을 야기할 수 있어 보인다.

나 또한 현재 사이드 프로젝트에서 여러 개의 버튼 컴포넌트를 반복문을 돌며 보여주고 싶어서

배열의 버튼에 들어갈 데이터와 JSX를 리턴하는 함수를 담아 구현해 본 적이 있다..

컴포넌트로 빼냐 아니면 해당사항과 같이 JSX리턴하는 함수로 만드냐에 장단점이 있어 보인다

한번 해당 부분은 컴포넌트로 작성해서 정리해 보아야겠다