컴포넌트

props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수이다.

컴포넌트 설계

대규모의 사용자 인터페이스를 독립적인 마이크로시스템으로 캡슐화하는 것이다. 하나의 컴포넌트와 관련된 모든 메소드 및 API가 컴포넌트의 구조 내에 존재하도록 요구한다.

고려사항

• 작고 단단한 컴포넌트를 만드는 것
• 이렇게 만들어진 컴포넌트간의 관계를 정의하고 유기적으로 연결하는 것

참고자료-1
참고자료-2

장점

컴포넌트의 가독성이 매우 높고 간단하여 유지보수하기가 쉬우며, 간편한 UI 수정 및 재사용에 용이하다. 요구 사항이 수시로 바뀌는 현대의 서비스 개발에 특화되어 빠르게 서비스를 피벗하거나 사용자가 급등할 수 있는 환경을 고려해 유연한 환경을 조성하는데 도움이 된다.
여기서 피벗의 의미는 초기에 수립한 사업의 목표나 서비스 운영방식 등을 중간에 바꿔 다른 성격의 사업으로 이전하는 것을 의미한다.

컴포넌트의 생명주기

출처: 더 알아보기

리액트가 렌더링을 될 때

1.컴포넌트를 생성할 때

: constructor -> componentWillMount -> render -> componentDidMount

2.컴포넌트를 제거할 때

: componentWillUnmount 메소드만 실행

3.Props가 변경되었을 때

: componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate

4.State가 변경되었을 때

: props 를 받았을 때 와 비슷하지만 shouldComponentUpdate 부터 시작

5.forceUpdate()를 실행하였을 때

6.부모 컴포넌트가 렌더링되었을 때

출처: 더 알아보기-1
출처: 더 알아보기-2
출처: 더 알아보기-3