FrontEnd/React

[React]React 자습하기 - 2. 함수컴포넌트에서 props 이용하기

김평범님 2021. 1. 22. 07:00
반응형

react에서의 props 활용하기

저번에 React 컴포넌트에서 공부를 했다.

우리는 앞으로 React에서 컴포넌트를 만들어서 재사용을 할 예정이다.

이때 컴포넌트 호출 시 각각 필요한 데이터를 전달할 일이 생길 것인데 이때 이용하는 게 바로 props이다.

오늘은 React에 props라는 개념을 이용해서 React 컴포넌트에 데이터를 전달해 보기로 하겠다.

 

 

컴포넌트를 만드는 두 가지 방법

React에서  컴포넌트는 두 가지 방법으로 만들 수 있다.

JavaScript의 function모양과 비슷하게 작성하는 함수 컴포넌트와

Class를 만들 듯이 작성하는 클래스 컴포넌트가 있다.

 

저번 스터디에서는 클래스 컴포넌트 형태로  Hello, world를 화면에 출력시켜보았다.

지난 시간에 만든 클래스 컴포넌트와 동일한 역할을 수행하는 함수형 컴포넌트로 한번 바꿔보겠다.

 

전체 코드

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

//클래스 컴포넌트
class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, world!</h1>;
    }
}

//함수컴포넌트
function FunctionHelloWorld() {
    return <h1>Hello, world</h1>;
}

//함수컴포넌트로 만든 엘리먼트로 추가해도 클래스컴포넌트로 넣었을 때와 동일한 결과가 나온다.
ReactDOM.render(
    <FunctionHelloWorld/>,
    document.getElementById('root')
);

함수형 컴포넌트로 만든 FunctionHelloWorld를 ReactDom.render로 호출 시 

마찬가지로 페이지에 Hello, world가 쓰이는 걸 볼 수 있다.

 

 

🧐 컴포넌트 네이밍 만들 시 주의사항

React 컴포넌트는 반드시 대문자로 시작해야 한다.

대문자로 작성하지 않을 경우, 해당 컴포넌트는 정상 작동하지 않는다.

ReactDom.render 시 엘리먼트 자리에 소문자로 시작하는 것은 DOM태그로 인식하기 때문에,
사용자가 직접 작성한 컴포넌트를 엘리먼트 자리에 넣어 실행할 경우에는 대문자로 시작해야 정확히 인식한다.

 

소문자로 컴포넌트을 만들면 동작하지 않는다.

 

 

 

Props 활용해보기

 

그럼 이제 우리가 만든 함수형 컴포넌트를 보자. 

Javascirpt에 익숙한 분들에겐 함수형 파라미터인 매개변수가 익숙할 것인데,

React의 props라는 개념은 즉 함수에 파라미터인 매개변수와 비슷한 역할이다.

 

만약 우리가 위에서 만든 함수 컴포넌트에서 Hello, World가 아닌 특정 사람 이름을 넣어서

인사하는 구문으로 바꾸려면 어떻게 해야 할까?

먼저 익숙한 함수 컴포넌트에서 props를 이용해 이름을 직접 받아보도록 하겠다.

 

전체 코드

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function FunctionHelloWorld(obj) {
    console.log(obj);
    return <h1>Hello, {obj.name}</h1>;
}

ReactDOM.render(
    <FunctionHelloWorld name="JiNa"/>,
    document.getElementById('root')
);

기존 FunctionHellWorld 컴포넌트 매개변수 자리에 obj이름으로 컴포넌트에서 전달한 props를 받도록 했다.

console.log로 확인해보니 React 컴포넌트에서 보낸 props가  객체 형태로 들어오는 걸 확인했다.

 

ReactDom에서 element 입력 시 name이라는 props를 적어주면 해당 props가 객체 형태로 컴포넌트에 전달된다.

그리코 컴포넌트 내에서 받은 props를 컴포넌트 내에서 이용하려면 {} 사이에 입력해주면 된다.

 

해당 코드를 실행시킨 화면이다.

 

props는 컴포넌트에 객체 형태로 전달된다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function FunctionHelloWorld(obj) {
    console.log(obj);
    return <h1>Hello, {obj.lastname}{obj.name}</h1>;
}

ReactDOM.render(
    <FunctionHelloWorld name="JiNa" lastname="kim" />,
    document.getElementById('root')
);

객체 형태로 전달되기 때문에 컴포넌트에 여러 개의 props를 보내는 것도 가능하다.

 

props에 name 외에 lastname 도 추가했다.

 

이렇게 우리가 만든 컴포넌트에 props 기능을 이용하면 컴포넌트에서 각각 다른 데이터를 가지고

그 조건에 맞는 결과를 출력하는 게 가능하다는 것을 알 수 있다.

 

 


💁‍♀️ 해당 포스팅은 스터디를 하며, 작성된 포스팅으로 정확하지 않은 내용이 포함되어있을 수 있습니다.

부족한 점이 있다면, 댓글로 알려주시면 바로 수정하도록 하겠습니다.

반응형