react의 기초 알아보기 1 (기초, JSX, 렌더링)

설치 방법

Node.js 설치

https://nodejs.org/ko

Node.js

-우선 Node.js 설치한 후 코드 에디터 선택: React 코드를 작성할 수 있는 코드 에디터를 선택하고 설치합니다.(Visual Studio Code 등)

- 새로운 React 프로젝트 생성을 위해 터미널 또는 명령 프롬프트를 열고 원하는 프로젝트 디렉토리로 이동후 아래 명령어로 새로운 React 프로젝트를 생성합니다.

npx create-react-app 프로젝트 이름

이 명령은 Create React App을 사용하여 새로운 프로젝트를 생성합니다. 프로젝트 이름에 자기가 원하는 프로젝트의 이름을 정할 수 있습니다. 그후 "cd 프로젝트 이름" 으로 이동하면 파일을 만들어 줍니다. 그리고 나서 사용을 하고 난후에 결과를 보고 싶을때는 "npm start" 를 터미널에 입력 해주면 결과를 볼수 있습니다.

 

 

기초

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을 가져옵니다.
- import React from "react";는 React 라이브러리에서 React 객체를 가져오는 구문입니다.

- import ReactDOM from "react-dom/client";는 React 라이브러리의 ReactDOM 객체에서 client 모듈을 가져오는 구문입니다.

-  ReactDOM.createRoot를 호출하여 root라는 변수- 에 React 루트를 생성합니다.

 이 루트는 React 애플리케이션을 렌더링할 DOM 요소를 가리킵니다. 여기서는 id가 "root"인 DOM 요소를 찾아 사용합니다.
- root.render()를 호출하여 루트에 렌더링할 내용을 전달합니다. JSX 문법을 사용하여 <h1>HELLO WORLD</h1>를 전달하고 있습니다. JSX는 JavaScript를 확장한 문법으로, React 컴포넌트를 작성하기 위해 사용됩니다. 이 경우 <h1> 태그 안에 "HELLO WORLD"라는 텍스트가 들어있는 컴포넌트를 작성하고 있습니다.
이렇게 작성된 코드는 "HELLO WORLD"라는 텍스트를 가진 <h1> 태그를 가진 컴포넌트를 루트 요소에 렌더링하게 됩니다. 실제로 이 코드를 실행하려면 해당 스크립트를 HTML 파일에 포함하고, id가 "root"인 요소를 생성해야 합니다.

 

JSX

JSX는 JavaScript XML의 약어로, React에서 UI를 구성하기 위한 문법입니다. JSX는 JavaScript의 확장 문법으로, XML과 유사한 문법을 사용하여 JavaScript 코드 안에 HTML 요소를 삽입할 수 있게 해줍니다.

ex1 )

const name = "world";
const hello = <h1>hello {name}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

//hello world

- <h1>hello {name}</h1>은 JSX 문법을 사용한 React 컴포넌트입니다. 중괄호 {} 안에 name 변수를 넣어 문자열 보간(interpolation)을 수행하고 있습니다. 이는 name 변수의 값인 "world"를 "hello" 문자열과 함께 출력하는 역할을 합니다.
- 다음으로, ReactDOM.createRoot(document.getElementById('root'))를 호출하여 root라는 변수에 React 루트를 생성합니다. 이때 document.getElementById('root')는 id가 "root"인 DOM 요소를 찾아 반환하는 역할을 합니다.
- 마지막으로, root.render(hello)를 호출하여 root에 hello 컴포넌트를 렌더링합니다. 이는 루트 요소에 hello 컴포넌트를 삽입하고 실제 DOM에 표시하는 역할을 합니다.
결과적으로, 위 코드는 "hello world"라는 제목을 가진 <h1> 태그를 가진 컴포넌트를 루트 요소에 렌더링하게 됩니다. 이를 실행하면 웹 페이지에서 "hello world"라는 제목이 나타납니다.

 

ex2 ) 객체와 함수를 같이 사용

function helloName(){
    return name.nick;
}
const name = {
    nick : "world",
}
const hello = <h1>Hello, {helloName()}</h1>;

//Hello, world

- helloName이라는 함수를 선언하고, name 객체를 생성하여 nick 속성에 "webstoryboy"라는 값을 할당한 뒤, JSX 문법을 사용하여 hello라는 변수에 <h1>Hello, {helloName()}</h1>을 할당하는 예시입니다.
- helloName 함수는 name 객체의 nick 속성을 반환하는 역할을 합니다.
- 다음으로, name 객체를 생성하고 nick 속성에 "world"라는 문자열 값을 할당합니다.
- 마지막으로, JSX 문법을 사용하여 <h1>Hello, {helloName()}</h1>을 작성하여 hello 변수에 할당합니다. 이는 "Hello, "라는 문자열과 함께 helloName() 함수를 호출한 결과를 출력하는 역할을 합니다.
결과적으로, 위 코드는 "Hello, world"라는 제목을 가진 <h1> 태그를 가진 컴포넌트를 hello에 할당합니다. 이를 렌더링하면 "Hello, world"라는 텍스트가 나타납니다.