REACT_컴포넌트, props

REACT_컴포넌트, props

 

 

 

 

https://nodejs.org/ko

전에도 한번 정리를 했었는데요

이번에 다시 한번 REACT 기초부터 정리를 해보겠습니다.

 

 

 

REACT 설치

우선 리액트를 사용하려면 먼저 Node.js를 설치해야 합니다.
https://nodejs.org/ko 설치는 여기서 하면 됩니다.

설치를 완료 했다면

터미널을 열어 

dir로 (저장할)경로를 찾고

npx create-react-app react3

을 입력해 react 파일을 만들어줍니다.

그럼 이렇게 자동으로 파일이 만들어집니다.

 

We suggest that you begin by typing:

  cd react3
  npm start

Happy hacking!
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.6.6
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.6
npm notice Run npm install -g npm@9.6.6 to update!

 

이렇게 메세지가 뜨면 완료!

 

이제 cd react3를 치고

code .을 치면 바로 비주얼스튜디오코드가 열립니다.

 

필요없는 파일은 다 지워줬습니다.

 

 

.gitignore 파일

# dependencies
/node_modules

node_modules 파일은 깃에 올리지 않을것이므로

이것만 남겨두고 다 지워줍니다.

 

README

# Getting Started with Create React App

jin

에서도 이것만 남겨두고 다 지워줬습니다.

 

 

그럼이제 REACT의 기본 개념을 익히기 위해

문자출력을 연습해보겠습니다.

 

scr-index.js

hello world 출력하기

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

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

//Hello World

react와 reactDOM 모듈을 가져옵니다.

root라는 ID를 가진 HTML 요소를 찾아서 이를 ReactDOM 의 루트노드로 설정합니다.

ReactDOM.creactRoot()메소드를 사용해 root 요소를 ReactDOM에 연결합니다.

 

<h1>Hello World</h1> 요소를 React요소로 생성하고, 이를 root요소에 렌더링합니다.

root.render() 메소드를 사용해 React 요소를 root 요소에 삽입하고, 이를 화면에 렌더링합니다.

 

비주얼스튜디오코드 터미널에서 
npm start를 누르면 사이트가 완성되어 출력창이 보여집니다.
끝낼땐 crrl + c

 

JSX 

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

const name = "jinhyunmi";
const hello = <h1>hello {name}</h1>

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

//hello jinhyunmi

React 와 ReactDOM 모듈을 가지고 옵니다.

jinhyunmi 라는 문자열을 변수 name에 할당합니다.

<h1>hello{name}</h1> 요소를 hello에 할당합니다.

 

이 요소는 name 변수의 값이 jinhyunmi 일때 <h1>hello jinhyunmi</h1> 와 같은 결과를 출력합니다.

 

root 라는 ID를 가진 HTML 요소를 찾아 이를 React DOM의 루트 노드로 설정합니다.

ReactDOM.createRoot()메소드를 사용해 root 요소를 ReactDOM에 연결합니다.

 

hello 에 저장된 요소를 React DOM 의 루트 노드에 렌더링합니다.

root.render() 메소드를 사용해 React요소를 root 요소에 삽입하고, 이를 화면에 렌더링합니다.

 

객체와 함수를 같이 사용

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

function helloName(){
  return name.nick;
}

const name = {
  nick : "hyunmi",
}

const hello = <h1>Hello, {helloName()}</h1>;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(hello);

//Hello, hyunmi

helloName 이라는 함수를 정의하고

이 함수는 name객체의 nick속성값을 반환합니다.

 

name객체를 정의합니다.

이 개체는 nick속성에 hyunmi 문자열을 할당합니다.

 

<h1>Hello, {helloName()}</h1> 요소를 정의하고 이 요소는 helloName() 함수를 호출해

hyunmi문자열을 참고하고, 이를 Hello 문자열과 함께 출력합니다.

 

컴포넌트

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

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

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

//Hello, jin

React를 사용해 Hello 함수를 정의하고, 해당 함수를 JSX 문법으로 호출해 element 변수에 할당하고

ReactDOM 을 사용해 root 엘리먼트를 생성한 뒤 해당 엘리먼트에 element 를 렌더링 하는 코드입니다.

 

props

React 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 방식
객체 형태로 전달되며, 컴포넌트를 호출할 때 인자로 전달된다
props를 사용하면 데이터를 동적으로 전달하고, 컴포넌트의 재사용성을 높일 수 있다.

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

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

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

React를 사용해 Hello  함수를 정의하고, 해당 함수에서는 props를 사용해 name값을 출력하는 문자열을 반환합니다.

이후에 JSX 문법을 사용해 name 속성에 jin 값을 전달한 <Hello name="jin" / > 를 element 변수에 할당하고, ReactDOM을 사용해 root엘리먼트를 생성한 뒤, 해당 엘리먼트에 element를 렌더링하는 코드입니다.

 

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

function Hello(props){
    return (
    <div>
        <div>{props.title1}</div>
        <div>{props.title2}</div>
        <div>{props.title3}</div>
        <div>{props.title4}</div>
    </div>
    );
}

const name = {
    name : "jinhyunmi",
    text : "hello",
    author : {
    name : "baby",
    ulr : "naver.com"
    }
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title1={name.name} title2={name.text} title3={name.author.name} title4={name.author.ulr}/>);

name 객체는 하나의 javaScript 객체로 선언되어, 이 객체를 이용해 props를 전달합니다.

 

React 의 createRoot() 함수를 사용해 root 요소를 선택하고, ReactDOM의 render() 함수를 사용해 Hello 컴포넌트를 렌더링합니다.