리액트 React : 컴퍼넌트, props

리액트 React : 컴퍼넌트, props

https://dongjin6539.tistory.com/105 블로그를 참고해서 작성하겠습니다.

참고 : https://dongjin6539.github.io/web2023/react/index.html

 

리액트 React 출력하기

1. 컴퍼넌트

리액트(React)는 UI(User Interface) 라이브러리로, 웹 어플리케이션의 구성 요소를 모듈화하여 개발할 수 있도록 지원합니다. 이러한 모듈화된 구성 요소를 컴포넌트(Component)라고 합니다.
리액트의 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다. 하나는 클래스 컴포넌트(Class Component)이고, 다른 하나는 함수형 컴포넌트(Functional Component)입니다. 클래스 컴포넌트는 클래스로 정의되며, 라이프사이클 메서드(lifecycle methods)를 사용하여 컴포넌트의 생명주기에 따른 작업을 수행할 수 있습니다. 반면, 함수형 컴포넌트는 함수로 정의되며, Hooks를 사용하여 상태와 라이프사이클 메서드와 같은 기능을 구현할 수 있습니다.

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(){
    return <h1>Hello, dongjin</h1>
}

const element = <Hello />

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

// 결과 : Hello, dongjin

• 위와 같이 예시로 적어줍니다.
• 함수 function를 입력하고 변수를 입력해주는데 변수의 앞 글자를 대문자로 입력을 하면 컴퍼넌트가 됩니다.
• 리액트 함수에는 return을 무조건 써서 출력을 반환해줍니다.
• 그리고 변수를 지정하고 컴퍼넌트 함수를 출력해주는데 해주기 위해서는 태그 형식으로 작성합니다. 그러므로 위와 같이 <Hello />를 입력해서 태그를 마무리해줍니다.
• html 코드 부분에 이름을 가져와서 render( )을 해서 변수를 입력해줍니다.

2. props

리액트(React)에서 props는 부모 컴포넌트로부터 자식 컴포넌트에게 전달되는 데이터를 의미합니다. 이를 통해 자식 컴포넌트에서는 받은 데이터를 사용하여 UI를 렌더링하거나, 부모 컴포넌트에게 이벤트를 전달할 수 있습니다.
props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 전달됩니다. 자식 컴포넌트는 props를 변경할 수 없으며, 오직 읽기 전용입니다. 이러한 단방향 데이터 흐름은 애플리케이션의 상태 관리를 간소화하고, 컴포넌트 간의 결합도를 낮추어 유지보수성과 확장성을 높입니다.

import React from "react";
import ReactDOM from "react-dom/client";

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

const element = <Hello name = "dongjin" />

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

// 결과 : Hello, dongjin

• 위와 같이 예시로 적어줍니다.
• 함수 function를 입력하고 변수를 입력해주는데 변수의 앞 글자를 대문자로 입력을 하면 컴퍼넌트가 됩니다. 그리고 매개변수로 props를 입력해줍니다.
• 리액트 함수에는 return을 무조건 써서 출력을 반환해줍니다.
• 그리고 변수를 지정하고 컴퍼넌트 함수를 출력해주는데 해주기 위해서는 태그 형식으로 작성합니다. 그러므로 위와 같이 <Hello />를 입력해서 태그를 마무리해줍니다. 그리고 안에 변수를 name로 저장하고 값을 "dongjin"을 입력하고 마무리해줍니다.
• 그리고 return에 출력시킬 값을 객체를 불러오는 형식으로 입력하고 { }로 감싸줍니다.
• html 코드 부분에 이름을 가져와서 render( )을 해서 변수를 입력해줍니다.

참고

2개의 컴퍼넌트와 props를 사용해서 출력하기

import React from "react";
import ReactDOM from "react-dom/client";

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

function App(){
    return (
    <div>
        <Welcome name = "shin" />
        <Welcome name = "dong" />
        <Welcome name = "jin" />
    </div>    
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />); 

// 결과
Hello, shin
Hello, dong
Hello, jin

• 여기서 첫번째 컴퍼넌트에 return할 값을 입력하고 두번째 컴퍼넌트에 return에서 컴퍼넌트를 출력하는 태그 형식으로 입력하는데 한개가 아닌 여러개를 출력할 때 ( )를 입력하고 <div></div>태그로 감싸고 입력해줍니다.
• 그리고 안에 변수를 name로 저장하고 값을 "dongjin"을 입력하고 마무리해주고 첫번째 컴퍼넌트에 매개변수로 props로 정리하고 return의 값에 변수 name을 객체를 불러오는 형식으로 props.name을 입력하고 { }로 감싸줍니다.
• 그리고 두번째 컴퍼넌트의 값을 불러오기 위함이므로 html 코드 부분에 이름을 가져와서 render( )을 해서 두번째 컴퍼넌트의 이름을 입력해줍니다. 그래서 <App />로 입력하면 결과와 같은 내용이 나옵니다.