[React 입문 Day 1] 컴포넌트, JSX, 불변성 간단 정리

1. 리액트 컴포넌트란?

• 리액트 컴포넌트는 함수다.
• 컴포넌트는 화면에 어떻게 표현될지를 정의하며, React 엘리먼트를 반환한다.

1-1. 함수형 컴포넌트 예시

// props라는 입력을 받아 React 엘리먼트를 반환
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 간단한 예시
function App() {
  return <div>hello</div>;
}

 

 

 

2. 리액트 실습 내용

컴포넌트(함수) 코드 기본 구조

2-1. 컴포넌트 만들기

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고,
  컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.
• 자바스크립트를 HTML 안에서 사용할 때 {} 중괄호를 사용한다.
  => 리턴문 이하에 자바스크립트 코드를 쓰기 위해 {}로 감싼다.

 

2-2. 부모-자식 컴포넌트 

• 상위요소 : 부모 컴포넌트 
• 품어지는 컴포넌트 : 자식 컴포넌트
• 기본 형식

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

 

• 연습 문제

3개의 컴포넌트를 만들고 할아버지, 엄마, 자식 컴포넌트를 만들어보고 서로 연결시키기.

정답

// src/App.js
import React from "react";

function Child() {
  return <div>연결 성공</div>;
}

function Mother() {
  return <Child />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

 

 

 

 

3. JSX (JavaScript XML)

• 정의: 리액트 엘리먼트(화면에 그려지는 HTML적 요소)를 생성하기 위한 문법.
• 실습 시 JSX의 규칙들

1) 태그는 꼭 닫아주기

// input 태그를 닫지 않고 넣어볼거예요!
function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

👇🏻

<input type='text'/>

2) 무조건 한개의 엘리먼트를 반환하기

import "./App.css";

function App() {
  return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );
}

export default App;

👇🏻

import "./App.css";

function App() {
  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type="text" />
    </div>
  );
}

export default App;

3) JSX에서 javascript 값을 가져오기 위해 중괄호를 쓴다.

function App() {
	const cat_name = 'perl';
  return (
    <div>
      hello {cat_name}!
    </div>
  );
}

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

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

4) class 대신 className

<div className="App">

5) 인라인으로 style 주기

[HTML]

<p style="color: orange; font-size: 20px;">orange</p>

 

[JSX]

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

 

 

4. 불변성 (Immutability)

• 불변성의 개념
  • 변경 가능한 상황 → 불변성이 없는 경우.
  • 변경 불가한 상황 → 불변성이 있는 경우.
  • 중요한 점: 불변성을 유지해야 한다.
• 불변성을 유지하는 방법
  • spread operator 사용: 기존 상태를 복사한 뒤 업데이트.

4-1. 리액트에서 불변성이 가지는 의의⭐️⭐️

• 리액트는 화면 리렌더링 여부를 결정할 때 state 변화를 확인.
  • state가 변함 → 리렌더링 발생.
  • state가 변하지 않음 → 리렌더링 없음.
• 변화 확인 방식: state의 변화 전후 메모리 주소 비교.