#1 React 실행흐름, 기본문법

강의 링크 :

https://www.youtube.com/watch?v=qCADzDFiVgo&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=2

https://www.youtube.com/watch?v=OYH_ISVjHR4&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=3 

 

해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다!

 

React 실행 흐름

 

package.json : 프로젝트를 관리하는 설정 파일

npm start 를 하면 index.js를 실행시킨다.

render는 데이터를 기반으로 그림을 그리는 것이다.

여기서 <App />을 클릭해보면 App.js로 이동된다.

즉 App.js를 그리겠다는 것이다.

<App /> 이와 같은 문법을 JSX 문법이라고 한다.

HTML문법을 JS에 작성할 수 있는 문법이 JSX 문법이다.

 

document.getElementById('root') 는 어디에다 그릴 것인지를 말한다.
root 라는 Id를 찾는 것으로, querySelector('#root') 와 동일하다.

이 root가 어디에 있냐면,

 public의 index.html에 있다. 이 곳의 div에

반갑다람쥐가 들어가는 것이다.
결국 열리는 파일은 index.html 이다.

 

정리하자면

npm start를 하면 index.js가 우선 실행된다.

그러면 index.js에서

<App /> 을 document.getElementById('root')에 그려 실행하게 된다.

index.html에 있는 root 자리에 내가 만든 <App />을 그려준다는 것이다.

(리턴 값인 <div>반갑다람쥐</div>를 그려준다.)

 

이렇게 JS파일들만 관리하면 되므로 html 파일을 따로 생성할 필요가 없다.

열리는 파일은 index.html 뿐이다.

따라서 페이지가 깜빡이지 않는다. 페이지 이동이 없기 때문이다.

이를 싱글페이지 어플리케이션(SPA) 라고 한다.

(따라서 페이지 요청받는 a 태그 사용 불가능)

페이지 이동 대신 body의 내용이 바뀌는 것이다.

 

 

JSX 기본 문법

 

이렇게 function 안에 들어가있는 <div> ... 와 같은 문법을 JSX 문법이라고 한다.

이와 같이 JSX를 통해 자바스크립트에 HTML을 넣는 방법을 배워보자

 

 

1. return시 하나의 Dom만 리턴할 수 있다.

우선, 리액트는 하나의 태그만 리턴해준다.

return <div> 반갑다람쥐 </div> <h1> 도토리 </h1>; 이렇게 작성하면 오류가 발생한다.

따라서

return <div> <div> 반갑다람쥐 </div> <h1> 도토리 </h1> <hr /> </div>;

와 같이 하나의 태그 안에 넣어줘야 한다.

// App.js
function App() {
  // 참고로 한 줄 일때는 return에 괄호 필요 없는데 두 줄 이상이면 괄호 사용
  return (
    <div>
      <div>반갑다람쥐</div>
      <h1>도토리</h1>
      <hr />
    </div>
  );
}

 

2. 변수 선언은 let 혹은 const로만 해야한다.

스코프가 꼬일 수(헷갈릴 수) 있기 때문에 let 혹은 const만 사용하자.

JSX에선 ${}가 아닌 {}로 변수를 사용할 수 있다.

let a = 1; // 변수
const b = 2; // 상수
function App() {
  return (
    <div>
      <div>반갑다람쥐 {a}</div>
      <h1>도토리 {b}</h1>
      <hr />
    </div>
  );
}

 

3. if 사용이 불가능하다. 대신 삼항연산자를 사용한다.

조건 ? true일 때의 값 : false일 때의 값

let a = 1; // 변수
const b = 2; // 상수
function App() {
  return (
    <div>
      <div>반갑다람쥐 {a === 1 ? '1이다!' : '1이아님..'}</div>
      <h1>도토리 {b}</h1>
      <hr />
    </div>
  );
}

출력결과 )

 

 

4. 조건부 렌더링

조건 && true일 때의 값

let a = 1; // 변수
const b = 2; // 상수
function App() {
  return (
    <div>
      <div>반갑다람쥐 {a === 1 ? '1이다!' : '1이아님..'}</div>
      <h1>도토리 {b === 1 && '도토리도 1이다!'}</h1>
      <hr />
    </div>
  );
}

출력결과 )

 

5. CSS 디자인을 할 수 있는 방법

- 내부에 적는 방법

const myStyle = {
  color: 'red',
};

function App() {
  return (
    <div>
      <div style={myStyle}>반갑다람쥐 {a === 1 ? '1이다!' : '1이아님..'}</div>
      <h1>도토리 {b === 1 && '도토리도 1이다!'}</h1>
      <hr />
    </div>
  );
}

추천하는 방법은 아니라고 한다.

 

 

- 외부 파일에 적는 방법

import './App.css';

App.css에서 작성하면 된다.

(현재 App.css에 작성되어 있는 코드들 다 삭제해주자)

const myStyle = {
  color: 'red',
};

function App() {
  return (
    <div>
      <div style={myStyle}>반갑다람쥐 {a === 1 ? '1이다!' : '1이아님..'}</div>
      <h1 className="box-style">도토리 {b === 1 && '도토리도 1이다!'}</h1>
      <hr />
    </div>
  );
}

실행결과 )