리액트 연습

리액트 연습하기

리액트를 조금 더 연습해보도록 하겠습니다.

컴포넌트(component)

컴포넌트는 자바스크립트 함수로 구현됩니다. 일반적으로 컴포넌트의 이름은 대문자로 시작합니다.

function Hello() {
    return (
        <h1>Hello, Hooong</h1>
    )
}
const element = <Hello />

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

export default Hello

코드 정리해보기

• <h1>태그를 사용한 문장을 반환하는 Hello라는 컴포넌트 함수를 만들었습니다.
• element에 JSX에서 컴포넌트 함수를 호출하는 문법으로 Hello함수를 호출하도록 저장합니다.
• element를 id("root")에 출력하도록 렌더링 합니다.
• Hello 컴포넌트를 내보내도록 export 합니다.

props 사용

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

function App(){
    return (
        <div>
        <Welcome name = "hoong" />
        <Welcome name = "hooong" />
        <Welcome name = "hoooong" />
        </div>
    )
}

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

props 정리해보기

• React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 메커니즘입니다.
• props는 "properties"의 줄임말로, 리액트 컴포넌트에서 사용할 데이터를 객체의 형태로 전달합니다.
• App함수에서는 Welcome 함수를 사용하면서 name에 값을 저장해주고, 저장한 값을 props로 전달하여 출력하게 됩니다.

 

다시 한번 복습해보기

function Practice(props){
  return (
    <div>
      <h1>{props.word}하세요</h1>
      <h2>{props.self} 한번</h2>
      <h3>{props.react} 연습을</h3>
      <h4>{props.do}입니다.</h4>
    </div>
  );
};

export default Practice;

• 위와 같이 practice.js 파일을 만들어 Practice 함수를 컴포넌트로 만들어줍니다.
• props를 사용하여 받아온 값을 같이 출력하도록 만들었습니다.
• Practice함수를 export 해주었습니다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import Practice from './practice';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Practice word="안녕" self="혼자서" react="리액트" do="하는 중" />
  </React.StrictMode>
);

• Index.js파일로 돌아와 practice.js파일의 Practice를 import 해줍니다.
• Practice를 출력하면서 각각의 속성을 만들어 데이터를 저장해줍니다.

 

결과가 담긴 사이트

https://hoong9.netlify.app/

React App

 

 

 

이상으로 살짝 맛 본 리액트를 연습해보았습니다 !