React Component

React Component에는 다양한 컴포넌트 패턴과 기술이 사용된다. 

 

1. 부모- 자식 컴포넌트

2. HOCs(Higher-Order Components

3. Render props

4. Context API

5. Hooks

 

오늘은 위와 같은 대표적인 것들 중에서 부모-자식 컴포넌트에 대해서 공부해보았다.

 

부모 - 자식 컴포넌트

컴포넌트 내에 다른 컴포넌트를 품을 수 있는 것.

1. 계층적 구조 : 부모 컴포넌트는 하나 이상의 자식 컴포넌트를 포함할 수 있음. 이때 자식 컴포넌트는 다른 컴포넌트의 부모가 될 수 있음.
2. 단방향 데이터 흐름 : 일반적으로 단방향 부모 → 자식 컴포넌트에게 데이터 전달 가능 이를 "props"라고 함. 자식 컴포넌트는 이를 읽기 전용으로 사용할 수 있다. 단, 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달하기 위해서는 이벤트를 발생시켜야 한다.
3. 재사용성 : 독립적인 작은 단위로 분리된 컴포넌트는 다른 부분에서 쉽게 재사용 가능.
4. 유지보수 : 컴포넌트 간의 명확한 역할과 책임 분리로 유지보수가 용이함. 수정이 필요한 경우에 해당 컴포넌트만 변경하면 되기 때문에 전체 애플리케이션에 미치는 영향은 최소화 할 수 있음.

부모-자식 컴포넌트 관계를 사용하는 것은 웹 개발의 효율성과 유지보수성을 높이고 재사용 가능한 컴포넌트를 통해 개발 시간을 줄일 수 있는 장점이 있다. 

그러나, 컴포넌트를 너무 세부적으로 분리하면 코드의 가독성과 유지보수성이 떨어질 수 있고, 이로 인해 전체 구조를 파악하기 어려워질 수 있다. 또한 많은 수의 컴포넌트가 중첨되면 데이터 흐름을 추적하기 어려워질 수 있다. 이를 해결하기 위해서 리덕스와 같은 상태 관리 라이브러리를 사용하여 상태를 중앙 집중식으로 관리할 수 있다.

부모-자식 컴포넌트 간의 데이터 통신은 위처럼 props를 통해 이루어지기 때문에 깊게 중첩된 컴포넌트에서는 데이터를 여러 컴포넌트를 거쳐 전달해야한다. 이는 코드의 복잡성을 증가시킬 수 있는 prop drilling를 유발 할 수 있다.

또 애플리케이션의 큐모가 커지면 전역 상태를 관리하는 것이 어려워질 수 있다.

 

---

주특기 구간에서 리엑트 강의를 듣고 고개를 끄덕끄덕 거렸던 기술이었다. 효율적으로 유지보수성을 높이면서 전체에 미치는 영향은 최소화 할 수 있다는게 매력적으로 느껴졌다. 개인적으로 지금까지의 프로젝트들은 소규모였기에 관리의 난이도가 전체적으로 괜찮았지만 앞으로 규모가 커질 프로젝트들을 생각하면 위와 같은 패턴이나 기술을 잘 사용하는게 중요한 것 같다.