[React] 리액트 컴포넌트와 Props

🎯 리액트에서 Component란?

📝 Component란

컴포넌트는 UI의 조각이다. 컴포넌트를 활용하여 엘리먼트를 독립적으로 만들어줄 수 있다.
= 엘리먼트의 재사용성을 높여준다.
즉, 독립적, 재사용 가능한 코드의 조각이다.

1. 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위
2. Component의 이름은 대문자로 시작
   • React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리한다.
3. Class Component / Function Component로 나뉨
4. Controlled Component / Uncontrolled Component

 

const MyComponent = ({ children }) => {
  return (
    <div
      style={{
        paddiong: 20,
        color: "blue",
      }}
    >
      {children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <p>Hi</p>
      <MyComponent>하이~</MyComponent> 
      <div>비와이~</div>
    </div>
  );
};

• Component를 만들고 자유롭게 활용할 수 있다.
• Component의 이름은 항상 대문자로 시작한다.

 

📝 Class Component와 Function Component

// class
class Hello extends React.Component {
  render() {
    const { name } = this.props;
    return <div>{name}님 안녕하세요.</div>;
  }
}

// function
const Hello = (props) => {
  const { name } = props.name;
  return <div>{name}님 안녕하세요.</div>;
};

• 초기 React의 Component는 모두 Class Component 였지만 v16부터 새로운 Function Component와 Hooks 개념이 발표되었다.
• 현재는 Function Component가 주로 사용되고 있다.
• 두 가지 방법의 유일한 차이점은 state 관리 기능이다.
  • 클래스형 : state 관련 기능 사용 가능
  • 함수형 : tate 관련 기능 사용 불가. (hooks를 통해 해결)

 

📕 Class Component

//정의된 이름
const name = “철수”;

//클래스 컴포넌트 작성
class Hello extends React.Component{
    render(){
    return <h1>Hello, {name}</h1>
    }
}

//컴포넌트 호출
const element = <Hello/>;

//렌더링
ReactDOM.render(element, document.getElementById('root'));

• React의 생명주기를 파악하기 쉽다.

 

📕 Function Component

//정의된 이름
const name = “철수”;

//함수 컴포넌트 작성
function Hello() {
    return <h1>Hello, {name}</h1>;
}

//컴포넌트 호출
const element = <Hello/>;

//렌더링
ReactDOM.render(element, document.getElementById('root'));

 

📝 Component의 특징

<MyComponent user= {{name: "민수"}} color="blue"> {/* props */}
  <div>안녕~</div> {/* children */}
</MyComponent>

• 컴포넌트에 Attribute에 해당하는 부분을 Props(Properties)라고 한다.
• 컴포넌트 안에 작성된 하위 Element를 children이라고 한다.
• 그리고 children도 결국엔 props 중 하나이다.

 

const MyComponent = (props) => {
  const { user, color, children } = props

  return (
    <div style={{color}}>
      <p>{user.name}님의 하위 element는!</p>
      {children}
    </div>
  )
}

• 상위 Element로부터 전달받은 props를 활용하는 코드이다.
• 이 컴포넌트의 자식(children) 요소 역시 props로부터 값을 받아오는 것을 볼 수 있다.

 

📝 Props란

function UserInfo(props){
  return(
    <div className="UserInfo">
      <div>영화: {props.name}</div>
      <div>한줄평: {props.text}</div>
    </div>
  )
}

const element = (
  <div>
    <UserInfo name="겨울왕국" text="엘사가 너무 예뻐요!" />
    <UserInfo name="신과함께" text="배우님 연기력 최고" />
  </div>
);

• Props는 컴포넌트에 값을 전달하는 역할을 수행한다.
• 컴포넌트는 Props를 수정할 수 없는 순수 함수로 정의된다.
• 순수 함수란 입력값이 바뀌지 않고 항상 동일한 입력값에 대해 동일한 출력 값을 제공하는 함수이다.
• Props는 컴포넌트 호출 시, 인자 값의 이름과 내용을 함께 제공한다. 컴포넌트 내에서 props.[이름]의 형식으로 인자 값을 받아 사용한다.

 

📝 컴포넌트 렌더링

📕 element 역할의 변화

const element = <div/>;

• react element는 단순히 HTML tag로 제작되었다.

const element = <Welcome name='철수' />

• 하지만, component를 활용하여 위와 같은 element가 생성되었다.

 

📕 component rendering 과정

• react가 component를 실행할 때, JSX attribute을 single object의 형태로 component에 전달한다.
• 이 object가 바로 props다.

// 한 개의 props
function App() {
  return (
        <Welcome name="철수" />
    )
}

function Welcome(props) {
  return <div>Hello my name is{props.name}</div>;
}

// 여러 개의 props
function App() {
  return (
    <Welcome name="철수" age="12" />
  );
}

function Welcome(props) {
  return <div>Hello my name is {props.name}, I'm {props.age} years old.</div>;
}

function Welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}
const element = <Welcome name="Elice" />;

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

 

📝 컴포넌트 구성하기

• component는 다른 component를 조합하여 구성할 수 있다.
• 부모 component에게 소속된 자식 component를 만들 수 있다.
• 즉, 조합이 된 component → 자식 component
• 조합을 한 component → 부모 component

function Welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="철수" />
      <Welcome name="민수" />
    </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

 

📝 컴포넌트 합성

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const Subject = (props) => {
    return <h3>React를 이해하기 위해서는 {props.name}을(를) 알아야 합니다.</h3>
}

const Curriculum  = () => {
    return (
        <>
            <Subject name="HTML" />
            <Subject name="CSS" />
            <Subject name="JavaScript" />
        </>
    )
}

ReactDOM.render(<Curriculum />, document.getElementById('root'));

• 컴포넌트는 다른 컴포넌트를 참조할 수 있다.
• 컴포넌트 합성을 통해 코드의 재사용성이 향상된다.

 

📝 컴포넌트 추출하기

• component를 추출하는 것은 여러 개의 작은 component로 나누는 것이다.
• component는 핵심 component를 추출할수록 간단해진다.
• React에서는 컴포넌트의 재사용을 위해 컴포넌트를 적절히 합성하고 추출하는 것이 좋다.

 

🏷 요약

• 컴포넌트끼리 데이터를 주고받을 땐 Props
• 컴포넌트 내에서 데이터를 관리할 땐 State
• 데이터는 부모 → 자식으로만 전달 가능하다.

 

📌 참고

• Employee Directory built with ReactJS-Codespots.com