[리액트/React] 컴포넌트

[리액트/React] 컴포넌트

 이번 게시글에서는 리액트에서의 컴포넌트에 대한 기본 개념을 정리해볼 것 입니다.

 리액트의 전부는 컴포넌트라고 할 수 있을만큼 컴포넌트는 중요한 부분입니다.

 

컴포넌트란?

 컴포넌트는 화면 구성을 나타내는 자바 스크립트 함수라고 이해했습니다.

 

컴포넌트 이름 규칙

 리액트에서 컴포넌트 이름은 첫 글자와 중간 글자들이 대문자인 파스칼 케이스(pascal case)를 사용합니다.

 

 * 이와 반대로 html에 내장된 내장 요소는 소문자로 시작합니다.

 

컴포넌트의 특징

•  리액트에서 컴포넌트들은 각각 단 하나의 루트 요소를 가져야만 합니다.
  • 모바일 xml에서 루트 요소는 하나인 것과 비슷한 듯.

 

JSX에서 데이터 동적 사용

 태그 내부에서 자바 스크립트 코드를 사용하고 싶을 경우 중괄호 내부에 자바 스크립트 코드를 작성하여 이용할 수 있습니다.

<div>
	{300 + 300}
</div>

위 코드는 중괄호 내부의 300+300이 연산되어 600을 출력합니다.

 

컴포넌트 재사용성을 위한 props

 컴포넌트는 기본적으로 다른 컴포넌트에 저장된 데이터를 사용할 수 없다. 다른 컴포넌트에 저장된 데이터를 사용할 경우 xml 태그의 속성을 지정하고 이를 매개변수로 받아 사용해야 합니다.

 

React에서는 xml 태그의 속성을 props라는 매개변수에 통합하여 전달받아 사용합니다.

 

컴포넌트 외부 데이터

const arr = [
    { name : "홍길동", age : "21"},
    { name : "이순신", age : "23"},
];

 

커스텀 컴포넌트에 데이터 넘기기

<CustomComponent
    name={arr[0].name}
    age={arr[0].age}>
</CustomComponent>

 

전달받은 데이터 사용

function CustomComponent(props) {
    const name = props.name;
    const age = props.age;
    
    return (
    	<div>
        	<h2> {name} </h2>
        	<h2> {age} </h2>
        </div>
    );
}

 

태그 사이의 내용 추출

 

props.children

 위 코드를 사용하여 태그 사이의 내용을 추출하여 활용할 수 있습니다.

 

예를 들어 아래 코드가 있다면 CustomComponent 코드에서 위 코드를 이용하여 태그 사이 값인 Hello world!를 추출 할 수 있습니다.

<CustomComponent
    name={arr[0].name}
    age={arr[0].age}>
        Hello world!
</CustomComponent>

 

참고

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리