프로젝트 생성

npm init react-app [폴더 이름]

개발 모드 실행

npm run start

public 디렉토리와 src 디렉토리의 index.html , index.js 를 제외하고 삭제해도 무관하다
index.html은 웹브라우저에서 가장 먼저 실행되는 파일이다

index.js은 index.html이 열리고 나서 실행되는 파일, 리엗트 코드들 중에서 가장 먼저 실행되는 파일

JSX 문법

자바스크립트 파일 안에 HTML 태그를 사용하는 문법, 자바스크립트와 HTML을 섞어서 쓸 수 있는 문법

지켜야하는 문법

• 하나의 태그로 감싸야 한다.
• for이나 class는 쓸 수 없다

프레그먼트(Fragment)

• 프레그먼트를 사용하면 만들고 싶지 않은 태그 대신 쓰면된다

import { Fragment } from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Fragment>
    <h1>안녕 리액트!</h1>
    <p>리액트</p>
  </Fragment>
);

이렇게 사용하면 감싸는 태그 없이 h1, p 태그가 나타난다

축약형 문법을 사용하면 프레그먼트를 불러오지 않아도 코드도 깔끔해진다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>안녕 리액트!</h1>
    <p>리액트</p>
  </>
);

자바스크립트 문법 사용

const product = 'MacBook';

function handleClick(e) {
  alert('곧 도착합니다!');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>{product} 주문하기</h1>
    <button onClick={handleClick}>확인</button>
  </>
);

• jsx 문법에서 중괄호{}를 활용하면 자바스크립트 표현식을 사용할 수 있다
• if, for, 함수 선언과 같은 자바스크립트 문장은 사용할 수 없다

리엑트 컴포넌트

JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 되는데 이것을 리엑트 엘리먼트라고 부른다.
리엑트 엘리먼트를 리턴하는 함수를 만들면 함수 이름을 가진 태그를 사용할 수 있다.

이 때 이 함수를 리엑트 컴포넌트라고 부른다.

import ReactDOM from 'react-dom/client';

function Hello() {
  return <h1>안녕</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <Hello />
    <Hello />
  </>
);

• 컴포넌트를 잘 활용하면 목적에 따라 코드를 세분화
• 재사용할 때 유용

컴포넌트 속성 추가

리엑트에서 컴포넌트에 지정한 속성을 props라고 부른다
props는 properites(프로퍼티스)의 줄임말이라고 생각하면 된다
각각의 속성은 prop이라고 부른다

props

• 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달

function App() {
    return (
        <div>
           <Dice color="blue"/>
        </div>
    );
}

export default App;

color라는 속성에 blue라는 값을 지정했다 브라우저의 개발자도구를 보면 color라는 속성을 찾을 수 없다. html코드가 아니라 리엑트 컴포넌트에 지정해준 속성이기 때문이다. 리엑트 개발자도구 components 탭에서 값을 확인이 가능하다

children은 컴포넌트의 자식들의 값으로 갖는 기본적으로

• children은 컴포넌트의 자식들의 값으로 갖는 기본적으로 존재하는 prop이다
• JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게된다

<Button prop="던지기" /> 으로 사용하지 않고

<Button>던지기<Button> 식으로 사용하고 싶으면,

컴포넌트를 정의할 때, children을 사용하면 된다

// App.js
import Button from './Button';
function App() {
  return (
    <div>
      <Button>던지기</Button>
      <Button>처음부터</Button>
    </div>
  );
}

export default App;


// Button.js
function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

Button.js에서 prop를 children이라고 하면 이와 같이 쓰지 않고 위의 코드처럼 작성해줘도 된다

• children은 문자열 뿐만 아니라 다른 컴포넌트나 다른 HTML 태그도 작성 가능하다

참고
코드잇