Component, props
덕구공
Component, props리액트 기초/개발환경 + JSX + Component2021. 7. 7. 09:12@덕구공
Table of Contents

Component

  • 리액트를 레고에 비유하면 컴포넌트는 레고의 블록 하나를 의미한다!
  • 컴포넌트는 클래스형과 함수형이 있다. 원래는 생김새와 용도까지 달랐지만 리액트가 발전함에 따라 이제는 생김새만 다르다고 봐도 무방하다.
  • 컴포넌트를 이해하고 잘 사용하려면 웹 사이트를 잘 조각내야 한다.
  • 아래와 같은 HTML 구조를 가진 페이지가 있다고 하자.
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <header> 
        ...
    </header>
    <div class="container">
        <div id="image-banner">
            ...
        </div>
        <div id="contents-1">
            ...
        </div>
    </div>
    <footer>
        ...
    </footer>
  </body>
</html>
  • 이 코드를 조각내면 아래처럼 나눌 수 있을 것이다.
<header/>
<container>
   <imagebanner/>
   <contents1/>
<container/>
<footer/>
  • 나눈 조각 하나하나를 컴포넌트라고 부른다.
  • <container/>를 하나의 조각으로 나누면 너무 커서 재사용성이 떨어지기 때문에, <container/> 컴포넌트는 <imagebanner/>, <contents1/> 컴포넌트로 다시 나누었다. 

State & Props

  • state는 Component가 가지고 있는 데이터이다.
  • Component의 state는 자유롭게 수정, 삭제, 추가를 할 수 있다.
  • props는 부모 Component가 자식 Component한테 주는 데이터이다.
  • 자식 컴포넌트가 가지고 있는 props라는 데이터는 마음대로 고칠 수 없다!

 

  • 아래와 같은 컴포넌트 구조가 있다고 하자.
<header/>
<container>
   <imagebanner/>
   <contents1/>
<container/>
<footer/>
  • <header/> 컴포넌트가 아래처럼 생겼다고 하자.

  • 이 컴포넌트에 들어갈 데이터는 로고 이미지의 경로, 메뉴의 이름(온라인, 오프라인, 기업교육, 내 강의실)이 있을 것이다.
  • 이 데이터들은 다른 컴포넌트에서 쓰이지 않고 <header/> 컴포넌트에서만 쓰이는 정보이다.
  • state는 이처럼 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다.
  • 반면, <container/> 컴포넌트는 두 개의 자식 컴포넌트를 가지고 있다.
  • <imagebanner/> 컴포넌트가 사진을 띄워야 하는데, 이 사진의 경로를 부모 컴포넌트인 <container/>만 가지고 있다면, <imagebanner/> 컴포넌트는 부모 컴포넌트인 <container/>에게서 데이터인 사진의 경로를 받아야 하는데, 이 사진의 경로가 <immangebanner/> 컴포넌트의 props이다!

함수형 Component

  • 함수형 컴포넌트의 기본 구조는 아래와 같이 생겼다!
  • const 뒤의 함수명은 컴포넌트의 이름이다.
  • ()안의 props는 부모 컴포넌트에게 받아온 데이터이다.
  • return 안에 내용은 컴포넌트가 뿌려줄 ui 요소이다.
  • export default 뒤의 부분도 컴포넌트의 이름이다. 함수명과 맞지 않으면 오류가 발생한다!
  • export를 해주면 다른 컴포넌트에서 불러서 쓸 수 있다.
  • 추가로 함수형 컴포넌트 내부에서 변수나 함수를 선언할 때는 꼭 let이나 const 키워드를 붙이자!
  • 또한, 컴포넌트를 선언할 때는 꼭 const 키워드를 붙이자!
import React from 'react'; 

//() 안에 props! 부모 컴포넌트에게 받아온 데이터.
// 컴포넌트의 이름 Duck
const Duck = (props) => {

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환.
    return (
        <div>
            안녕
        </div>
    );
}

// 우리가 만든 함수형 컴포넌트를 export 해준다.
// export 해주면 다른 컴포넌트에서 컴포넌트를 불러다 쓸 수 있다.
export default Duck;

Component 불러오기

  • 다른 컴포넌트에서 컴포넌트를 불러올 때, import [컴포넌트명] from ['컴포넌트가 있는 파일경로']; 를 코드에 추가하면 불러올 수 있다. 
import [컴포넌트명] from ['컴포넌트가 있는 파일경로'];
  • src폴더 아래에 Duck.js라는 파일로 아래처럼 컴포넌트를 작성해보자.
import React from 'react'; 

const Duck = (props) => {

    return (
        <div>
            Duckgugong
        </div>
    );
}

export default Duck;
  • 위의 파일을 App.js 파일에서 불러와보자.
  • App.js 파일과 같은 src 폴더에 있으므로 코드 상단에 import Duck from './Duck'을 써주면 된다.

App.js

import React from 'react';
import './App.css';
// 컴포넌트 불러오기
import Duck from './Duck.js';

function App() {

  const name = 'duck'
  return (
    <div className="App">
        <p>컴포넌트!</p>
        <Duck/>
    </div>
  );
}

export default App;
  • 컴포넌트가 잘 불러와진 것을 확인할 수 있다.

클래스형 Component

  • 클래스형 Component의 기본 구조는 아래와 같이 생겼다.
  • class Duck extends React.Component : React의 Component를 상속받아서 Duck 컴포넌트를 만듬
  • construnctor(props), super(props) :생성자 함수
  • this.state : 컴포넌트의 state를 정의
  • return() : 렌더 함수 안에 리액트 앨리먼트를 넣어준다.
import React from 'react'; 

class Duck extends React.Component {

    constructor(props){
      super(props);
      // 컴포넌트의 state를 정의!
      this.state = {

      };
    }
  
    // 랜더 함수 안에 리액트 엘리먼트를 넣어준다!
    render() {
        return (
            <div>duckgugong</div>
      );
    }
  }

export default Duck;

Component에서 Component로 데이터 넘기기

  • 클래스형과 함수형 컴포넌트의 다른 점은 함수형 컴포넌트에는 state가 없다. 
  • React hook을 사용하면 함수형 컴포넌트에서도 state를 사용할 수 있지만, hook 없이 state를 사용할 수 없다.

 

  • 우선 App.js 파일을 아래와 같이 클래스형 컴포넌트로 작성하자.
  • 아래 <Duck ~/> 부분을 보면 name과 height라는 속성으로 컴포넌트의 state 값인 name과 height를 Duck 컴포넌트로 넘기는 것을 볼 수 있다.

App.js

import React from 'react';
import './App.css';
import Duck from './Duck.js';

class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      name: 'duck',
      height: '180'
    };
  }

  render() {
      return (
      <div className="App">
        <h1>컴포넌트!</h1>
        <Duck name={this.state.name} height={this.state.height}/>
      </div>
    );
  }
}

export default App;
  • Duck.js를 아래처럼 만들어서 App.js에서 넘겨준 name과 height 값을 화면에 출력해보고 콘솔창에 출력해보자. 개발자 도구를 열어서 확인해보자.
  • props라는 인자로 상위 컴포넌트가 넘겨준 값이 들어온 것을 확인할 수 있다!

Duck.js

import React from 'react'; 

const Duck = (props) => {

    console.log(props.name, props.height)

    return (
        <div>
            {props.name} {props.height}
        </div>
    );
}

export default Duck;

클래스형 VS 함수형

  • 클래스형 컴포넌트는 인스턴스를 생성 후 render 코드 블록 쪽만 리랜더링후 다시 실행한다.
  • 하지만 함수형 컴포넌트는 함수 블록 안에 있는 모든 것을 리랜더링시 마다 다시 실행한다.
  • 때문에, 함수형 컴포넌트에서는 state와 같은 변수의 값이 매번 초기화 되기 때문에 이를 기억해 줄 리액트 훅을 사용한다.

'리액트 기초 > 개발환경 + JSX + Component' 카테고리의 다른 글

JSX  (0) 2021.07.07
React 개발환경 설정, 프로젝트 만들기  (0) 2021.07.07
덕구공
@덕구공 :: Duck9s'

주니어 개발자에욤

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

리액트 기초/개발환경 + JSX + Component 추천 글
more
image

티스토리툴바