React의 핵심 개념 JSX, Props, State

1️⃣ JSX (JavaScript XML)

💡 개념

JSX는 JavaScript 코드에서 HTML을 작성하는 방식, HTML처럼 보이지만 js 코드 안에서 동작한다~

 

✨ 특징

html 문법과 유사하지만 js 코드로 변환됨

중괄호 안에 js 표현식 사용

 

📝 예제

function HelloWorld(){
	const name = "React";
    return <h1>Hello, {name}!</h1>
}

위 코드에서 <h1>Hello, {name}!</h1>은 JSX로, name에 변수값이 대입되어 Hello, React가 출력

 

⚠️ 주의

JSX는 한개의 부모요소로 무조건 감싸야함

// 잘못된 예제
return <h1>Hello!</h1><p>React</p>;

// 올바른 예제
return (
  <>
    <h1>Hello!</h1>
    <p>React</p>
  </>
);

2️⃣ Props(Properties)

💡 개념

Props는 컴포넌트 간 데이터를 전달하는데 사용, 부모 컴포넌트가 자식 컴포넌트에 값을 내려주는 방식

 

✨ 특징

읽기 전용으로 변경 불가

컴포넌트 재사용성을 높여줌 -> ?

 

📝 예제

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

Greeting 컴포넌트는 props.name을 받아서 출력함

App 컴포넌트에서 name="Alice"를 전달하니까 Hello, Alice가 전달됨

 

 

⚠️ 주의

Props는 읽기 전용이라 변경 불가

 

 

 

3️⃣ State (상태)

💡 개념

State는 컴포넌트가 동적으로 데이터를 변경하고 화면을 업데이트 할 수 있게 하는 내부 데이터.

 

✨ 특징

컴포넌트 내부에서 관리되는 값값이 변경되면 화면이 자동으로 렌더링 됨

 

 

📝 예제

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기 값 0 설정

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

useState(0)으로 상태값을 설정하고 count와 setCount라는 함수로 접근한다버튼을 클릭하면 setCount가 실행되면서 화면에 새로운 값이 출력된다

 

⚠️ 주의

상태값은 직접 수정이 불가하고, setCount함수로만 사용해야한다.

 

 

마지막은 전체 요약으로 마무리~~