[React] Component

Component

기존의 웹 프레임워크는 MVC방식으로 정보, 화면, 구동코드를 분리하여 관리하는데 이러한 방법은 코드관리를 효율적으로 할 수 있으나 MVC각 요소의 의존성이 높아 재활용이 어렵다.

웹사이트 화면은 각 요소가 비슷하고 반복적으로 사용되는 경우가 많기 때문에, 컴포넌트를 사용하면 MVC의 뷰를 독립적으로 구성해 재사용도 할 수 있고, 컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들수도 있다.

 

구성요소

Property: 상위컴포넌트에서 하위컴포넌트로 전달되는 읽기 전용 데이터

State: 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터

Context: 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터

 

 

Property

자바스크립트의 자료형을 모두 사용할 수 있으며 수정할 수 없다는 특징이 있다. 자료형은 미리 선언해주는 것이 좋은데, 자료형을 미리 선언해야 리액트 엔진이 props로 전달하는 값의 변화를 효율적으로 감지하고, 지정되지 않은 자료형을 전달하려고 할때 경고로 알려준다.

props로 문자열을 전달할 때에는 " " 사용하고, 문자열 외의 값은 { } 를 사용해야 한다.

컴포넌트에 props를 전달하면 props에 있는 데이터가 하나의 객체로 변환되어 컴포넌트의 인자로 전달된다.

 

State

값을 저장하거나 변경할 수 있는 객체이다.

 

주의사항

• constructor에서 반드시 초기화해야 한다.
• 초기화하지 않으면 내부 함수에서 state 값에 접근할 수 없기 때문에 마땅한 초기값이 없으면 빈 객체라도 넣어야 한다.
• state값을 변경할 대는 setState() 함수를 반드시 사용해야 한다.
• 임의로 state값을 변경해도 render()함수가 실행되지 않고 setState()를 호출해야 자동으로 render()를 호출한다.
• setState()함수는 비동기로 처리되며 setState() 코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화과정을 거친다.

 

Context

리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능이다. Props Drilling 등의 문제가 있을 때 context를 사용함으로써 해결할 수 있다.