[TIL] 10/30 리액트 기초-1

1. 리액트 

• 리액트는 자바스크립트 라이브러리
• 사용자 인터페이스를 만들기 위해 페이스북에서 개발
• Single Page Application 

 

1.1. 리액트 프로젝트 시작하기

 

리액트 프로젝트 생성

npx create-react-app 프로젝트명

 

리액트 앱 실행

npm start

 

만약 typescript 기반으로 리액트 프로젝트를 생성하려면 아래의 명령어를 사용해주면 된다.

npx create-react-app 프로젝트명 --template typescript

 

 

아래의 코드는 index.tsx 파일의 코드이다. index.tsx 의 구조는 바꾸지 않고, App 컴포넌트를 가지고 있는 App.tsx 파일의 구조만 바꾸면 화면을 바꿀 수 있다.

// index.tsx

// ...

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

 

 

2. jsx 문법

 

jsx 란 자바스크립트의 확장 문법이라고 생각하면 된다. 

 

 

1. 최상위 태그는 반드시 하나여야 함 (병렬X)

-> 만약 마땅한 태그가 없다면 최상위 태그를 빈 태그 <></> 를 사용해도 된다

 

2. 기존의 class -> className 으로 사용

 

3. 중괄호 열어서 자바스크립트 표현식 넣을 수 있음

-> <h1> 태그 안에 Hello 리액트 들어가 있음

-> 중괄호 안에는 변수 말고도 삼항연산자 등을 사용할 수 있음 (단, if/for 문 불가)

function App() {
  let name = "리액트";

  return (
    <div className="App-header">
      <h1>Hello {name}</h1>
      <p>반갑습니다</p>
    </div>
  );
}

 

4. 인라인 스타일링

 

App.css 파일을 import 해와서 스타일을 적용시켜줄 수도 있지만, 태그에 직접적으로 스타일을 적용시킬 수 있다.

대신 그냥 html 파일에서 인라인 스타일링할 때와 다르게 스타일을 카멜케이스로 적어줘야한다. 

 

ex. background-color -> backgroundColor

 

App.css 는 모든 컴포넌트들이 다 접근할 수 있기 때문에 스타일 공유를 하고 싶지 않을 때 해당 컴포넌트 안에서 꼭 사용하고 싶은 스타일을 인라인 스타일링으로 적용시켜주면 된다. 

function App() {
  let name = "리액트";

  const style = {
    backgroundColor: 'black',
    color: 'yellow'
  }

  return (
    <div style={style}>
      <h1>Hello {name}</h1>
      <p>반갑습니다</p>
    </div>
  );
}

 

5. 모든 태그들은 닫아줘야 함

 

 html 태그들 중 <img> , <br> 과 같은 태그들은 닫아주지 않아도 되는 태그들이다. 하지만 이런 태그들도 리액트에서는 꼭 닫아줘야 에러가 나지 않는다. <img></img> 이렇게 닫아줘도 되지만, <img /> 이렇게 닫아서 사용하는 것도 가능하다. 

 

6. 주석 

// 한 줄 주석

/* 
여러 줄 주석
*/

 

추가로 주석을 작성할 때는 이런 식으로 작성해주면 좋다. (여러 명이 작업할 때)

{/*
    작성자: a
    작성일: 2024.10.30
    내용: ~~
*/}