[React] 2. React 문법

1. 하나의 Function은 하나의 태그만 리턴할 수 있다.

• 여러 개의 태그를 리턴할 시 에러 발생

import './App.css';

function App() {
  return (
	  {/* 에러 발생 */}
    <h1>안녕</h1>
    <h2>안녕</h2>
  );
}

export default App;

• 반드시 부모 태그로 감싸야 함
• div 또는 빈 태그(fragment)로 감싸는 것이 일반적

import './App.css';

function App() {
  return (
	  <>
	    <h1>안녕</h1>
	    <h2>안녕</h2>
    </>
  );
}

export default App;

2. 태그는 반드시 닫기

• 기존 html에서 사용하던 단일 태그(br, hr, img 등)도 닫아야 함

import './App.css';

function App() {
  return (
	  <>
	    <h1>안녕</h1>
	    {/* 안 닫으면 에러 발생 */}
	    <br />
	    <h2>안녕</h2>
    </>
  );
}

export default App;

3. 속성 이름은 카멜 표기법으로 작성

import './App.css';

function App() {
  return (
	  <>
		  {/* class로 작성 시 에러 발생 */}
	    <h1 className='Blue-color'>안녕</h1>
	    <br />
	    <h2>안녕</h2>
    </>
  );
}

export default App;

4. 자바스크립트 표현식 (Expression) 사용

• 특정 변수를 넣고 싶을 때에 표현식 (Expression)을 사용

import './App.css';

let num = 10;

function App() {
  return (
	  <>
	    <h1 className='Blue-color'>안녕 {num}</h1>
	    <br />
	    <h2>안녕</h2>
    </>
  );
}

export default App;

5. 조건부 렌더링

• 삼항 연산자

import './App.css';
import Logo, { Logo2 } from './components/Logo';

let num = 10;

function App() {
  return (
    <>
      <Logo />
      <Logo2 />
      <h1 className="Blue-color">안녕 {num === 10 ? '10이다' : '아니다'}</h1>
    </>
  );
}

export default App;

• 논리 연산자 (&&)

import './App.css';
import Logo, { Logo2 } from './components/Logo';

let num = 10;

function App() {
  return (
    <>
      <Logo />
      <Logo2 />
      <h1 className="Blue-color">안녕 {num === 10 ? '10이다' : '아니다'}</h1>
      <h2>{num >= 10 && '10 이상이다'}</h2>
    </>
  );
}

export default App;

6. 스타일 지정

• 스타일은 JS Object로 만들어서 삽입
• 스타일 이름은 카멜 케이스로 작성

import './App.css';
import Logo, { Logo2 } from './components/Logo';

let num = 10;

let myBigSize = {
  fontSize: 50,
};

function App() {
  return (
    <>
      <Logo />
      <Logo2 />
      <h1 className="Blue-color">안녕 {num === 10 ? '10이다' : '아니다'}</h1>
      <div style={myBigSize}>스타일</div>
    </>
  );
}

export default App;

7. Argument Dribbling

• 변수 전달 시 구조 분해를 통한 인수 할당

import './App.css';
import ListItem from './components/ListItem';
import Logo, { Logo2 } from './components/Logo';

let num = 10;

let myBigSize = {
  fontSize: 50,
};

function App() {
  return (
    <>
      <Logo />
      <Logo2 />
      <h1 className="Blue-color">안녕 {num === 10 ? '10이다' : '아니다'}</h1>
      <div style={myBigSize}>스타일</div>
      <ListItem id={1} title={'1번 아이템'} />
    </>
  );
}

export default App;

import React from 'react';

export default function ListItem(props) {
  //   let id = props.id;
  //   let title = props.title;
  let { id, title } = props;
  return (
    <div>
      {id} {title}
    </div>
  );
}

8. 반복문 (리스트 렌더링)

• 반복문은 for문이 아닌 map()을 활용하여 작성

import './App.css';
import ListItem from './components/ListItem';
import Logo, { Logo2 } from './components/Logo';

let num = 10;

let myBigSize = {
  fontSize: 50,
};

let products = [
  { id: 1, title: '1번 아이템' },
  { id: 2, title: '2번 아이템' },
  { id: 3, title: '3번 아이템' },
];

function App() {
  return (
    <>
      <Logo />
      <Logo2 />
      <h1 className="Blue-color">안녕 {num === 10 ? '10이다' : '아니다'}</h1>
      <div style={myBigSize}>스타일</div>
      {products.map(item => (
        <ListItem id={item.id} title={item.title} />
      ))}
    </>
  );
}

export default App;

• item 자체를 넘겨주면 더욱 간결하게 작성 가능
• ListItem에서 arguments.item으로 전달해야 함

import './App.css';
import ListItem from './components/ListItem';
import Logo, { Logo2 } from './components/Logo';

let num = 10;

let myBigSize = {
  fontSize: 50,
};

let products = [
  { id: 1, title: '1번 아이템' },
  { id: 2, title: '2번 아이템' },
  { id: 3, title: '3번 아이템' },
];

function App() {
  return (
    <>
      <Logo />
      <Logo2 />
      <h1 className="Blue-color">안녕 {num === 10 ? '10이다' : '아니다'}</h1>
      <div style={myBigSize}>스타일</div>
      {products.map(item => (
        <ListItem item={item} />
      ))}
    </>
  );
}

export default App;

import React from 'react';

export default function ListItem(props) {
  //   let id = props.id;
  //   let title = props.title;
  let { id, title } = props.item;
  return (
    <div>
      {id} {title}
    </div>
  );
}

9. 주석

• {*/ ... /*} 형태로 작성