[React] React 기본 문법

Jul 04, 2024

Contents

1. React 기본 문법 2. 변수 바인딩 3. 전개 연산자(spread operator)4. 배열 데이터 삭제 5. 배열 데이터 가공하기 6. JSX 문법

1. React 기본 문법

index.js


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

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

reportWebVitals();

app.js


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

function App() {
  return 
}

export default App;

💡

index.js 파일이 App.js 파일을 실행시킨다.

💡

리액트는 하나의 돔만 리턴이 가능하다. 따라서 하나의 돔 내부에 돔을 넣어야 한다.

2. 변수 바인딩

html 내부에 변수 바인딩할 수 있다.

3. 전개 연산자(spread operator)

💡

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


// 변수
let a = [1,2,3]; 
// 불변, 상수, 실행 직전에 메모리에 뜸. , 컨파일 타입이 없음.
const b = [4,5,6];


// 불변
let a1 = [...a,4] ;  // 전개 연산자
// 변함
a.push(4); // 원본 배열에 추가하기 때문에 사용하지 않는다.

💡

스프레드 연산자는 배열을 확장하는 데 사용된다. …a는 배열 a 의 모든 요소를 개별적으로 나열한다. 이 문법을 사용하여 새로운 배열을 생성할 수 있다.


console.log("이전",a);
console.log("이후",a1);

전개연산자 문법


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

전개 연산자를 사용해 배열 값을 추가할 수 있다.

4. 배열 데이터 삭제

💡

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


const b = [4, 5, 6]; // 상수
// 삭제는 필터로 함. 불변을 유지해야 되니까
let b1 = b.filter((item)=>item !==5);

5. 배열 데이터 가공하기

💡

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


// 5. 가공하기
let postList =[
        {id : 1, title:"제목1",content :"내용1"},
        {id : 2 title:"제목2",content :"내용2"},
        {id : 3, title:"제목3",content :"내용3"},
];

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

6. JSX 문법

💡

JSX문법 JavaScript 코드 내에서 HTML 요소를 쉽게 작성할 있다.


import './App.css';

let list = [1,2,3,4];

function App() {
  return <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    {list.map((i) => 
    <h1>{i}</h1>
    )}

    </div>

}

export default App;