React로 주로 개발하는 나는 React로 만들어진 프로젝트 코드를 볼 일이 많은데 어떤 코드는 가독성이 좋은 반면 어떤 코드는 굉장히 난잡하고 보기힘들다. 물론 개발하는 방법은 개인차가 있겠지만 더 효율적인 방법은 있을 것이다. 그렇다면 다수의 개발자들이 피하고 있는 안티패턴만은 피한다면 최소한의 가독성과 유지보수성은 확보가 될 것이다. 내가 추후 React 프로젝트를 하면서 하면 안되는 안티패턴들을 무엇이 있을지 알아보았다.

1. 단일 컴포넌트 내부의 거대한 트리 구조 지양

리액트를 처음 시작했을 때 흔히 구조와 구조 정리 등 많은 부분을 고려하지 않고 로직에 따라 하나의 거대한 컴포넌트를 생성 후 내부에 수많은 조건과 로직이 담겨있는 복잡한 코드를 짜게 될 수 있다.

위 컴포넌트는 아래 조건을 적용해서 안티패턴을 피할 수 있다.

• 컴포넌트 트리 내부 긴 조건문을 따로 변수를 사용하는 방식으로 리팩토링한다.
• 트리의 각각의 조각들을 작은 컴포넌트로 분리한다.
• 이벤트에 매핑할 함수를 컴포넌트 트리로부터 분리한다.

2. 글로벌 스코프 단위의 Context 지양

많은 상황에서 **상태(state)**와 컨텍스트(context) 의 경계가 모호해지는 경우가 많다. 하지만 엄연히 이 둘은 다르며 컨텍스트를 전체 상태관리(global state management) 용도로 사용하는 구조를 지양해야한다.

컨텍스트(context)는 관계있는 컴포넌트간 prop 을 공유할 수 있게 해주고, 프롭 드릴다운 이펙트(prop drill down effect) 에 대한 방어수단으로 사용할 수 있다.

실제 리액트 공식문서에서도 컨텍스트의 주된 용도는 다양한 레벨에 네스팅된 컴포넌트들에게 데이터를 전달하는 것이며, 컨텍스트를 사용하면 컴포넌트를 재사용하기 어려워지므로 꼭 필요할 때만 쓰라고 명시가 되어있다.