React :: JSX와 props

📝 JSX

💬 리액트에서 생김새를 정의할 때, 사용하는 문법

💡 JSX가 JacaScript로 변환 시, 지켜야 할 규칙

💬 태그는 꼭 닫혀있어야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <br>      // error 
      <br /> 
    </div>
  );
}

export default App;

💬 두 개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    // error
    <Hello />
    <div>안녕히계세요.</div>
    
    // <div>로 감싸기 
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
    
    // <>로 감싸기 
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

💡 JSX 내부에 자바스크립트 값 사용

💬 {} 으로 감싸기

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

💡 style 과 className

💬 인라인 스타일 : 객체 형태로 작성, camelCase 형태로 네이밍

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',   // backgroundColor : camelCase 형태의 네이밍
    color: 'aqua',
    fontSize: 24,               // 기본 단위 px
    padding: '1rem'             // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

💬 CSS class 설정 : 'className='으로 설정

... 

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>   // className=
    </>
  );
}

💡 주석

💬 //

💬 {/ ... /}

📝 props

💡 props

💬 어떠한 값을 컴포넌트에게 전달할 때, 사용

💡 props 의 기본 사용법

// App.js

function App() {
  return (
    <Hello name="World" />
  );
}

// Hello.js

function Hello(props) { 
  return <div>Hello, {props.name}</div>    // Hello, World
}

💡 여러 개의 props, 비구조화 할당

// App.js

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

// Hello.js

// 비구조화 할당 사용 X 
function Hello(props) { 
  return <div style={{ color: props.color }}>Hello, {props.name}</div>   // Hello, react 
}

// 비구조화 할당 사용 O
function Hello({ color, name }) {
  return <div style={{ color }}>Hello, {name}</div> // Hello, react 
}

export default Hello;

💡 defaultProps 로 기본값 설정

💬 컴포넌트의 props가 미지정일 때, 기본적으로 사용할 값을 설정하고 싶다면, 컴포넌트에 defaultProps 라는 값을 설정

// Hello.js

function Hello({ color, name }) {
  return <div style={{ color }}>Hello, {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

// App.js

function App() {
  return (
    <>
      <Hello name="react" color="red"/>   // 안녕하세요 react 
      <Hello color="pink"/>               // 안녕하세요 이름없음
    </>
  );
}

export default App;

💡 props.children

💬 컴포넌트 태그 사이에 넣은 값을 조회

// Wrapper.js
// props.children을 렌더링해야 내부의 내용이 보임

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

// App.js

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>   // 안녕하세요 react 
      <Hello color="pink"/>               // 안녕하세요 이름없음
    </Wrapper>
  );
}

Reference

벨로퍼트와 함께하는 모던 리액트