JSX와 Props

진 솔·2025년 11월 5일

프론트엔드 기초 개념 한눈에 정리

목록 보기

8/20

JSX란?

JSX는 JavaScript XML의 약자로, 자바스크립트 문법을 확장한 형태이다.
HTML과 유사한 문법을 자바스크립트 코드 안에서 직접 작성할 수 있어, UI를 더 직관적으로 표현할 수 있다.

JSX를 사용하면 JS와 HTML을 섞어 쓸 수 있으며, 컴포넌트 안에서 변수나 표현식을 중괄호 {}를 통해 렌더링할 수 있다.

function IntroduceMe() {
	const myName = "진솔";
	
	return (
	<footer>
		<h1>안녕 내 이름은 {myName}이야</h1>
	</footer>
	)
}

이렇게 jsx는 html을 안에 넣어 동적으로 표현할 수 있습니다. 그래서 실습에 적용을 해보자면

JSX의 특징

JSX 내부에서는 중괄호 {}를 이용해 자바스크립트 값을 표현할 수 있다.
단, 문자열, 숫자, 배열 등 렌더링 가능한 값만 출력할 수 있으며,
자바스크립트 구문(조건문, 반복문 등)은 직접 사용할 수 없다.

JSX 주의사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.

return (
	<main>
		{10}
		{number}
     	{/* 아래는 불가능 */}
		{if{}{}} // 조건문 x
		{for{}{}} // 반복문 x
	</main>
)

조건에 따라 다른 UI를 보여주고 싶다면 삼항 연산자를 사용한다. (조건문도 가능)

return <main>{isLogin ? <Home /> : <Login />}</main>;

2. 숫자, 문자열, 배열 값만 렌더링 된다.

const obj = {a:1}

return (
	<main>
		{10}
		{number}
		{undefined} // 출력 x
		{true} // 출력 x
		{null} // 출력 x
		{obj} // 점 표기법을 이용하여 랜더링
	</main>
)

3. 모든 태그가 닫혀있어야 한다.

<img src="image.png" />   // self-closing 태그
<br />                    // 줄바꿈도 닫아야 함

4. 최상위 태그는 반드시 하나여야만 한다.

<main> 과 같이 최상위 태그는 하나여야만 하고 2개가 있을 경우 오류가 발생한다.

// 잘못된 예시
return (
  <h1>제목</h1>
  <p>내용</p>
);

// 올바른 예시
return (
  <div>
    <h1>제목</h1>
    <p>내용</p>
  </div>
);

JSX 활용 예시

배운 것을 토대로 엄청 간단한 코드작성 및 css 추가

스타일 태그에 있는 내용을 css 파일에 옮겨서 dev className = logout으로 바꿔서 적용도 해봤다! className은 jsx의 예약어이므로 자바스크립트의 예약어인 class를 쓰면 안된다고 한다

Props

Properties의 줄임말로, 컴포넌트에 값을 전달하기 위한 매개체이다.

예를 들어서 버튼 컴포넌트를 만들어서 여러개를 배치해보겠습니다.

이 버튼들을 각자 다른 텍스트로 probs를 줘보도록 하겠습니다.

각 버튼마다
<Button text = {"메일"}>,
<Button text = {"카페"}>,
<Button text = {"블로그"}>

라고 바꿔줘도 ui는 바뀌지 않지만 console.log로 찍었을 떄, 관리자 모드에서는 잘 적용된게 확인됩니다!

버튼 컴포넌트 매개변수에 text, color을 넣어 해당 버튼을 텍스트와 컬러에 맞게 랜더링 시킬 수 있습니다.

import Button from './components/button';

function App() {
  return (
    <>
      <Button text = {"메일"} color = {"red"}/>
      <Button text = {"카페"}/>
      <Button text = {"블로그"}/>
    </>
  );
}
export default App

const Button = ({text, color = "black"}) => {
    return <button style={{color:color}}>{text}</button>;
}
export default Button;

위 예시에서 구조분해할당을 이용해 각 버튼은 전달받은 text, color 값을 사용하여 서로 다른 결과를 렌더링한다.
color는 기본값 "black"을 갖도록 설정되어 있다.

children Props

props는 단순한 값뿐 아니라 자식 요소를 전달할 수도 있다.
자식 요소는 자동으로 children이라는 이름의 props로 전달된다.

import Button from './components/button';

function App() {
  return (
    <>
      <Button text = {"메일"} color = {"red"}/>
      <Button text = {"카페"}/>
      <Button text = {"블로그"}>
	      <div>자식 요소</div>
      </Button>
    </>
  );
}
export default App

const Button = ({children, text, color = "black"}) => {
    return (
	    <button style={{color:color}}>{text}{children}</button>;
    )
}
export default Button;

뿐만 아니라 전에 만들어놨던 컴포넌트도 자식 컴포넌트로 사용이 가능하다고 한다.

import Button from './components/button';

function App() {
  return (
    <>
      <Button text = {"메일"} color = {"red"}/>
      <Button text = {"카페"}/>
      <Button text = {"블로그"}>
	      <Header />
      </Button>
    </>
  );
}
export default App

위 예시에서 <div>나 <Header />와 같은 요소가 자식으로 전달되며,
이는 children을 통해 Button 컴포넌트 내부에서 렌더링된다.

정리

JSX는 자바스크립트 코드 안에서 HTML과 같은 구조를 표현할 수 있는 문법 확장이다.
JSX 내부에서는 표현식만 사용할 수 있으며, 반드시 하나의 부모 요소로 감싸야 한다.
Props는 부모가 자식에게 데이터를 전달하는 수단이며, 단방향으로만 흐른다.
props를 통해 문자열, 숫자, 배열, 컴포넌트, 자식 요소 등 다양한 데이터를 전달할 수 있다.
자식 요소는 children이라는 이름의 props로 자동 전달된다.

리액트는 컴포넌트 기반 UI 라이브러리이기 때문에, 컴포넌트 간 데이터 전달은 매우 중요하다.
props는 리액트의 핵심 기능이므로 반드시 숙지해야 한다.

진 솔

FE Developer Wannabe / 내가 인정 받을 때까지!! / https://github.com/sorrybro2 <- 깃허브 !