React 프로젝트 생성/구조

CRA (Create React App) 사용

1. 터미널에서 yarn 명령어 입력

yarn create react-app my-first-react

 

 

Vite (비트) 사용하기

yarn create vite my-first-vite-react-app --template react

yarn과 달리 --template react 라는 부분이 있다

vite는 리액트만을 위해 만들어진 것이 아니므로 어떤 라이브러리/프레임워크를 사용할 것인지 직접 지정해준다

 

Vite 로 프로젝트 생성한 경우 특징

• 빠른 콜드 스타트, HMR(Hot module replacement)

 

리액트 프로젝트 구조

index.html SPA 리액트 프로젝트의 유일한 html 파일

main.jsx에서 UI 요소들을 받아 index.html의 div#root에 넣어주어 구성된다.

main.jsx는 App이라는 컴포넌트를 받아온다.

우리는 이 App 컴포넌트를 만들어서 리액트 프로젝트를 만들 것!

 

 

컴포넌트

UI 재사용이 가능한 코드 조각

 

1) 함수형 컴포넌트

- props라는 입력을 받음

- 화면에 어떻게 표현되는지 기술하는 React Elements를 반환

function Welcome(props) {
  // JavaScript 사용 영역
  
  return (
    { /* JSX 사용 영역 */ }
    <h1>Hello, {props.name}</h1>
  );
}

 

2) 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

주의사항

1) 컴포넌트의 가장 첫글자는 대문자로 작성

2) 폴더는 소문자로 시작하는 카멜 케이스, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스(파스칼케이스)로 이름 작성

 

JSX

작스~ JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

따라서 JSX로 표현된 <div> 등은 DOM 요소가 아닌 React 요소다.

브라우저는 JSX를 직접 해석할 수 없으므로 babel을 이용해 js로 변환한다.

 

기초 문법들

* 코드스니펫 사용해서 기본 틀 만들기

: react snippets 확장 설치 + rafce 입력하여 기본 틀을 붙여넣는다.

 

1. 닫는 태그를 사용하지 않는 경우 반드시 <Input/>과 같이 한번에 닫아줘야 한다.

2. return 하는 태그에서 가장 상위 레벨에는 하나의 태그만 있어야한다.

// 불가
const App() = () => {
  return (
    <div></div>
    <div></div>
  );
}

// 가능1
const App() = () => {
  return (
    <div>
      <div></div>
      <div></div>
    </div>
  );
}

// 가능2 -> 굳이 div로 감싸고싶지 않은 경우
const App() = () => {
  return (
    <>
      <div></div>
      <div></div>
    </>
  );
}

 

3. React element 부분에서 JS 문법을 사용하고 싶은 경우 { }를 활용한다.

const App() = () => {
  const NUMBER = 1000;
  return (
    <div>{NUMBER}</div>
  );
}

 

4. style은 js 객체의 형태로 설정한다. 따라서 js 문법을 쓰겠다는 {} 내부에 객체를 표현하는 {}가 포함돼야 함

const App() = () => {
  return (
    <p style={{color: "orange", fontSize: "20px"}}>첫번째 줄</p>
  );
}

const App() = () => {
  const pTagStyle = {
    color: "orange",
    fontSize: "20px",
  };
  
  return (
    <p style={pTagStyle}>첫번째 줄</p>
  );
}

두 App()은 동일한 결과!