React 문법

박선규

Jul 14, 2025

Contents

DOM이란?React 기본 문법 전개연산자 배열 데이터 삭제 배열 데이터 가공 JSX 문법

DOM이란?

📌

DOM은 웹 페이지의 HTML 요소들을 객체로 표현한 트리 구조

로, 자바스크립트가 HTML과 CSS를 조작할 수 있도록 도와주는

브라우저 내부의 인터페이스다.

React 기본 문법

index.js


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


// index.html의 <div id="root"></div> 요소를 찾아서 React 루트로 설정
const root = ReactDOM.createRoot(document.getElementById('root'));

// root 요소에 App 컴포넌트를 렌더링 (StrictMode는 잠재적 오류를 알려주는 개발용 래퍼)
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 웹 성능 측정을 시작 (필요 없으면 호출 안 해도 됨)
reportWebVitals();;

app.js


import logo from './logo.svg';
import './App.css';

function App() {
  return 
}

export default App;

📌

app.js파일을 id 값이 root인 돔에다가 불러온다.

📌

React는 리턴시 하나의 돔만 가져 올 수 있다. 이유는 React는 컴포넌트를 렌더링할 때, return된 JSX를하나의 DOM 노드로 변환해서 ReactDOM.createRoot().render(...) 등에 넘기기 때문이다.

즉 같은 계층의 코드는 한번만 호출 가능 그러므로 부모- 자식 관계로 만들어줘야한다.

전개연산자

📌

상태로 데이터를 관리하려면 이전 데이터와 새로운 데이터를 비교해야한다. 그래서 이전 데이터는 불변형태여야한다.


let a = {1: "이름", 2: "나이", 3: "생년월일"};

let b = {...a, 4: "휴대폰번호"};

console.log (b);


let 변수 = {...원래변수,변경원하는필드 : xx }

배열 데이터 삭제

📌

filter 메서드를 사용해 원본 배열을 변경하지 않고 필요한 요소만을 새로 생성해 불변성을 유지 할 수 있다.


const a = [1, 2, 3]
let aa = a.filter((item) => item !== 1); // 아이템은 배열안에 각 요소를 의미한다.

배열 데이터 가공

📌

map 메서드를 사용해 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성합니다. 전개 연산자와 함께 사용하면 배열의 원하는 값만 선택해서 변경할 수 있다.

JSX 문법

📌

JSX는 템플릿으로 JavaScript 코드내에서 HTMl 요소를 작성 가능하다.



const postList =[
        {id : 1, title:"제목1",content :"내용1"},
        {id : 2, title:"제목2",content :"내용2"},
        {id : 3, title:"제목3",content :"내용3"},
];

let post = postList.map((a)=>({
    ...a,
    content:"내용변경",
}));
console.log (post);


function App() {
  return (
    <div>
      <div>숫자:{num}</div>
      {post.map((i) => (
      <div>
        <h1>{i.id}</h1>, 
        <h1>{i.title}</h1>,
        <h1>{i.content}</h1>
      </div>
      ))}      
    </div>
  );
}


{showFriendModal === true && <Modal />} 

{showFriendModal && <Modal />}

*둘이 같은거다. 리엑트에서는 아래 코드를 가독성을 위해 많이 쓴다.