리액트 기초

1.리액트 컴포넌트를 만들땐 해당코드를 통하여 리액트를 불러와야한다.

import React from 'react';

2.컴포넌트화하여 쓰고자할때 파일하단에 해당코드를 넣어야 다른 컴포넌트에서 불러서 사용할 수 있다.

export default Hello;

3.다른컴포넌트를 불러올땐 해당코드 사용

import Hello from './Hello';
//return 안에  <Hello />

4.JSX

• Self Closing 태그사용
• 두개 이상의 태그는 무조건 하나의 태그로 감싸기 (<></>)
• 내부에 자바스크립트 변수를 사용할때는 {} 으로 감싸서 사용 (<>{name}</>)
• if 문 사용하지 못하기에 조건부 삼항연산자를 사용한다.

조건문 ? 선택문1 : 선택문2
{ 1 + 1 === 2 ? (<div> 맞음 </div>) : (<div> 틀림 </div>) }

5.Style

• 객체형태
• camelCase
• className

const style = {
    backgroundColor: 'black'
    }
<div style={style}>{name}</div>
<div className="gray-box"></div>