나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #2)

1. 들어가며(지난시간 복습)

안녕하세요 콥스랩 기술블로그입니다!

지난 포스팅에선 간단한 react 프로젝트를 만들어보기 위해

npx create-react-app이라는 명령어를 입력해보았습니다.

그랬더니요?

아래와 같이 여러 파일들이 저절로 다운로드가 됐었고

터미널 창에 아래와 같이 입력했더니??

 npm start

이런 화면이 나왔었습니다.

우리는 public폴더부터 구경을하다가 index.html 파일을 알아봤어요.

‘일단 어떤 코드라도 써보자..’라는 생각이 들었죠?

그래서 index.html파일에 아래와 같이 입력해봤어요.

<h2>index.html 넌 도대체 뭐니?</h2>

그랬더니요?

이렇게 바로 반영이 되었던 것을 볼 수 있었습니다.

그런데 분명 우리가 보고 있던 index.html파일엔 저 리액트 로고와 관련된 코드가 없는 것처럼 보였습니다. 그렇다면 저 리액트 로고는 어떻게 화면에 나타나게 된 것일까요?

그 비밀을 알아보기 위해 이어서 다른폴더 및 파일들을 탐험해볼까요?

2. public 폴더

npx CRA(create-react-app)를 진행했다면 public 폴더가 위의 사진처럼 만들어집니다.

우리는 그 중 favicon.ico라는 파일과 index.htlm파일을알아 보았어요.

logo192.png, logo512.png : png 파일은 뭐겠어요? 그냥 사진이죠?
manifest.json : Progressive Web App (PWA)에서 사용되는 설정 파일입니다. PWA는 웹 애플리케이션을 모바일 앱처럼 동작하도록 만들어주는 기술입니다.
robots.txt : 검색 엔진 크롤러에게 웹 사이트의 특정 부분에 대한 접근 규칙을 지정하는 텍스트 파일

public 폴더에서 일단 우리에게 가장 중요한 파일은 index.html 이었습니다.

‘모르긴 몰라도 index.html 파일이 현재 우리가 보고 있는 페이지에 반영되더라.’라는 생각을 갖고 있어봅시다.

3. src 폴더

사실, 우리가 실질적으로 코드를 넣을 공간입니다. 여러분은 아마 특별한 이유가 있지 않는이상

public 폴더보다는 src 폴더를 더욱 자주 접근하시게 될 것입니다.

(1) App.css

src 폴더를 봤더니 제일 상단에 App.css 라는 파일이 있네요?

그럼 이런 생각을해보는거죠. ‘음 css파일은 html의 스타일을 정의해주는 파일이니까.. 뭐라도 코드를 바꿔보면 어떤 일이라도 생기지 않을까?’

다시 한 번 말씀드리지만, 리액트가 아예 처음이라는 사람이라고 가정하는 중입니다!

그래서 저는 css파일을 좀 바꿔보고 싶었어요.

.App {
  text-align: center;
  width:30vw;
}

width:30vw 라는값을 추가해봤더니요? (여기서 잠깐, 30vw는 현재 여러분의 디스플레이 크기의 30%만큼 너비를 정하겠다는 속성값입니다)

‘어라? 리액트 로고사진이 줄어들었네?`

그러면 이어서 이런 생각을 할 수 있습니다.

‘모르긴 몰라도, App.css 파일을 import해서 사용하는 파일이 있을 것이고, 그 파일이 결국 우리가 지금 보고 있는 화면을 나타내주는 거구나?!’

(2) App.js

우리는 App.css 파일 밑에 있는 App.js 파일을 열어볼 차례입니다.

그랬더니,

바로 걸려버렸습니다. 이 파일에서 App.css 파일을 import해서 쓰고 있었네요?

즉, App.js 파일이 곧 우리가 보고 있는 화면인

이 화면과 연관이 있겠구나? 라는 생각이 듭니다.

정말 그런지 한 번 테스트를 해보기 위해. App.js 파일 내 코드를 내가 막 고쳐보는 겁니다.

근데 가만보니까

App 함수 내 return 부분에 적힌 코드를 보면

<p>  "Edit src/app.js and save to reload." </p>

라고 적혀있습니다. 어라?

이 로고에도 똑같은 글자가 적혀있네요?

그럼 이런 생각이 드는겁니다.

‘아 이 빨간 선 안에 있는 부분이 곧 화면에 나오는 건가보다’

그래서 저는 <header> 태그 안에 있는 코드들을 없애보겠습니다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

그랬더니 예상대로 화면에 비추는 곳이 없어졌습니다.

우리는 또 하나 알게 되었네요?

‘모르긴 몰라도 App.js 파일의 return 부분을 고치면 우리가 띄운 웹페이지에 반영이 되는구나’

그러면 이제 그 방식이 어떻게 되는지를 알아보러 다음 파일로 넘어가겠습니다.

(3) index.js

App.js 에서 바로 index.js 파일로 넘어왔죠?

그 사이에 있던 App.test.js index.css 파일은 지금 당장에는 필요가 없습니다.

자 그럼 이제 index.js 파일을 알아볼까요?

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

const root = ReactDOM.createRoot(document.getElementById('root')); 라는 코드가 보이죠?

우리가 주목해야할 점은 바로 'root' 인데요. 이거 우리 어디서 많이 봤다 그쵸?

index.html 파일을 한 번 다시 가볼까요?

<div id="root"> 라는 div태그가 보이네요.

‘혹시 index.js의 코드 중 const root = ReactDOM.createRoot(document.getElementById('root')); 이 코드에 적힌 ‘root’라는 엘리먼트가 저 div태그 속 ‘root’는 아닐까?’ 라는 의심을 해봅니다.

그래서 저는 div 태그의 id를 ‘root2’로 한 번 바꿔볼거예요.

<body>
    <h2>index.html 넌 도대체 뭐니?</h2>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root2"></div>
  </body>

그랬더니?

이런 오류가 떠버렸네요?!

이번엔 반대로, index.js 파일에 있는 const root = ReactDOM.createRoot(document.getElementById('root'));

이 부분의 root를 ‘root2’로 바꿔보겠습니다.

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

그랬더니요?

이제 다시 정상적으로 동작합니다.

index.js 파일 코드에대해 간략하게 설명드리겠습니다. 지금 당장에는 용어 하나하나에 너무 얽메이지마시고, ‘아! 어떤 파일에 있는 어떤 코드 부분을 수정했더니 어떤 변화가 있네?’라는 걸 먼저 파악해보시면 좋을 것 같습니다.

ReactDOM.createRoot() 함수는 렌더링할 대상을 지정합니다. 렌더링이란 쉽게 말해서 ‘웹 화면에 우리가 짠 UI를 뿌려준다’정도로만 이해하고 넘어가겠습니다. document.getElementById('root2')로 지정되어 있는 DOM 요소를 찾아 대상으로 설정합니다. 이는 HTML에서 id가 "root2"인 요소를 찾아서 렌더링 결과를 삽입할 위치를 지정하는 것을 의미합니다.
root.render() 함수는 실제로 React 애플리케이션을 렌더링합니다. <App /> 컴포넌트를 React.StrictMode 컴포넌트로 감싼 형태로 렌더링되고, 엄격한 모드에서 애플리케이션이 실행됩니다.

React.StrictMode: 개발 모드에서 애플리케이션을 실행하고, 잠재적인 문제를 검사하고 경고 메시지를 출력하는 데 도움을 줍니다. 예를 들어, 부적절한 사용이나 오래된 API 사용 등을 감지할 수 있습니다. 애플리케이션의 성능에는 영향을 주지 않으며, 배포 시에는 제거되는 것이 일반적입니다. → 시원하게삭제합니다.

root.render() 함수를 호출하여 렌더링하면, React는 <App /> 컴포넌트와 그 자식 컴포넌트들을 가상 DOM에 생성합니다. 그런 다음, 실제 DOM과의 차이점을 계산하여 변경 사항을 효율적으로 감지하고 반영합니다.

즉, root.render(코드)란 ‘render() 내부의 코드를 root에 뿌려준다. ’라는 것이죠. 그리고 이 root는 우리가 index.html파일에서 설정한 <div id=root2></div> 부분입니다.

render()내부엔 <App /> 이라고 적혀있는데요. 우리는 지금부터 이렇게 태그 안에 대문자로 적혀있는 것을 컴포넌트라고 불러볼 거예요. (<div> 이런건 소문자고 html태그라고 부를거고, 대문자로 적힌 건 일단 쉽게 컴포넌트라고 하겠습니다.)

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

따라서 이 부분을 해석하면 다음과 같겠죠?

‘나는 ‘root2’라는 id를 가진 엘리먼트에 우리가 만든 UI요소를 그려줄건데, 그 변수명을 root라고 할거야. 그리고, 우리가 만든 UI요소는다음과 같은데, <App />이라는 컴포넌트야. ’

그런데 index.js파일 상단에 보시면 import App from './App'; 이런 문구가 있습니다.

즉 우리가 렌더링하고 있는 <App/> 이라는컴포넌트는 App.js 에서 import하겠다는 거죠.

그렇기 때문에 우리가 App.js 에서 코드를 수정했을 때 바로 화면에 반영되었던 것입니다.

4. 마무리하며 + 다음시간 배울 내용

자 오늘은 리액트 맨땅에 헤딩 part2 시간이었는데요. 지난 시간에 이어

오늘은 index.js파일까지 한 번 훑어봤습니다.

다음 시간부터는 본격적으로 컴포넌트를 만들어보고,

어떨 때 사용하며 어떤 특징이있는지 알아보도록 하겠습니다.

또한 컴포넌트끼리 데이터를 주고받는 방식에 대해서도 알아보도록하겠습니다.

지금까지 긴 글 읽어주셔서 감사합니다 🙂

'React' 카테고리의 다른 글

나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #1) (4)	2023.06.26

콥스랩 기술 블로그

나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #2)

'React' 카테고리의 다른 글

댓글

티스토리툴바

나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #2)

'React' 카테고리의 다른 글

관련글

댓글

티스토리툴바