JSX 기본 문법

- JSX 안에서 자바스크립트 변수 사용 시

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

 

- JSX 안에서 style 혹은 css 클래스 사용 시

1. style 지정 : 우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다.

2. css 클래스 : CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야 합니다.

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

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

 

- JSX 주석 : 내부의 주석은 {/* 이런 형태로 */} 작성합니다. ( /* 중괄호로 감싸지 않으면 화면에 보입니다 */)

 

- props : 부모 컴포넌트에서 자식 컴포넌트 사용 시 전달할 값

- props를 비구조화 할당 가능

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
// style= 안에 중괄호가 두번들어가는것은 가장위 {}는 jsx문법, 그리고 그 안에 {}는 객체리터럴 입니다.

- props.children : 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 때

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

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

- boolean props : 이렇게 isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미

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

- props에 따른 렌더링

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}