[ React ] 리액트 컴포넌트와 props :: 데이터 전달 및 재사용 가능한 UI구성

리액트 컴포넌트란?

컴포넌트는 UI의 구성요소로 화면에 보여지는 작은 조각들을 나타낸다.

작은 조각 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 그런 컴포넌트들은 페이지를 구성한다.

컴포넌트를 사용해 UI를 독립적이고 재사용 가능한 모듈로 나누어 개발할 수 있다.

render / state / props 로 구성되어 있다.

모든 리액트 컴포넌트는 Pure 함수 같은 역할을 해야 한다.

(동일한 props와 state에 대해 항상 동일한 결과를 반환해야 한다)

기능 단위로 구분하는 것이 좋고 재사용 가능 로직이나 코드들은 재사용 하는 것이 좋다.

재사용할 일이 없어도 작은 단위로 단일한 책임을 가질 수 있도록 분리해서 나누는 것이 좋다.

 

 

 

컴포넌트 생성하기

 

- 리액트에서 컴포넌트를 생성하는 방법에는 React.Component를 상속받아 생성하는

클래스 컴포넌트와 일반 JS함수로 생성하는 함수 컴포넌트가 있다.

 

// 함수 컴포넌트 예시
function Greeting(props) {
  return <h1>HI, {props.name}!</h1>;
}

// 클래스 컴포넌트 예시
class Greeting extends React.Component {
  render() {
    return <h1>Hi, {this.props.name}!</h1>;
  }
}

- 컴포넌트의 이름은 항상 대문자로 시작해야 한다.

소문자로 시작하면 HTML엘리먼트로 인식될 수 있다.

 

 

컴포넌트 렌더링하기

 

//함수 컴포넌트 Greeting 선언
function Greeting(props){
	return(
    	<h1>hi,{props.name}</h1>
    );
}

//Greeting 컴포넌트를 사용해 element 만들기
const element = <Greeting name="김오롯" />;

ReactDOM.render(
    element,
    document.getElementById('root')
);

 

 

 

props(properties)란?

 

props는 컴포넌트에서 부모 컴포넌트로부터 전달하는 데이터를 담은 자바스크립트 객체.

인자로 전달된 데이터를 props를 사용하여 화면에 렌더링할 수 있다.

props를 활용해 재사용 가능하고 유지 보수가 용이한 컴포넌트를 만들 수 있다.

 

 

 

props의 특징

 

- props는 읽기 전용이다. 자식 컴포넌트는 props를 직접 수정하거나 변경할 수 없다.

같은 props에 들어오면 항상 같은 엘리멘터를 리턴해야 한다.

데이터 변경이 필요하다면 부모 컴포넌트에서 새로운 props를 전달해 업데이트 해야 한다.

 

- props는 컴포넌트 함수의 인자로 전달된다. 함수형 컴포넌트는 props를 매개변수로 받아 사용하고 클래스 컴포넌트는 this.props를 통해 접근한다.

 

// 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달
function Parent() {
  return <Child name="Zestlumen" age={29} />;
}

// 자식 컴포넌트에서 props 사용
function Child(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

 

 

 

 

컴포넌트와 props에 대해 이해하기 좋게 만들어진 '에어비앤비' 사이트 이미지를 가져왔다.

 

출처: 에어비앤비  https://www.airbnb.co.kr/

출처: 에어비앤비  https://www.airbnb.co.kr/

 

동일한 모양으로 같은 컴포넌트에서 생성된 엘리먼트지만

props에 의해 이미지와 텍스트만 변경된 것을 볼 수 있다.