[부스트코스/웹 프론트엔드 시작하기(리액트&리덕스)] 리액트 맛보기 - 디렉토리 구조

'create-react-app' 명령어를 통해 react app을 만들게 되면 아래와 이미지와 같은 디렉토리가 생성된다.

public 폴더는 index.html이 존재하는 곳이다.

콘솔에서 npm run start 명령어를 입력하면 새로운 웹 페이지가 열리게 되는데

이 웹 페이지가 index.html 파일을 실행시킨 결과이다.

 

index.html에서 중요하게 봐야할 부분은

<div id="root"></div>

이 <div> 태그 부분이다.

리액트를 통해서 만들어낸 컴포넌트들은 id가 root인 <div> 태그 안에 들어가도록 create-react-app은 약속해놨다.

 

개발자 도구를 통해서 소스코드를 보면 id가 root인 태그 안에 react로 만든 태그들이 위치한 것을 볼 수 있다.

 

id가 root인 태그 안에 들어가는 컴포넌트들은 src 폴더 안에 있는 파일들로 수정할 수 있다.

개발할 때 대부분의 파일들은 이 src 폴더 안에 위치하게 될 것이다.

 

src 폴더의 파일 중에서 entry 파일은 'index.js' 파일이다.

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

위 코드에서 root가 의미하는 것은 index.html 파일에서 본 id가 root인 태그이다.

<App />은 리액트를 통해 만든 사용자 정의 태그, 즉 컴포넌트이다.

 

이 컴포넌트의 실제 구현은 'import'를 통해 불러온 src 안의 app.js 파일이다.

import App from './App';

 

app.js 파일을 보면 아래 코드를 볼 수 있다.

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

return의 괄호 안에 있는 코드들이 웹 페이지에서 확인한 코드와 같다는 것을 알 수 있다.

개발을 할 때는 이 App.js라는 파일 안의 내용을 수정하면 웹 페이지가 자동으로 reload되면서 결과를 확인할 수 있다.

이 때 반드시 리액트는 하나의 태그 안쪽에 나머지 태그들이 있어야 한다.

 

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello, React!!
      </div>
    );
  }
}

App.js 파일 안에 App 컴포넌트의 내용을 수정하면 위와 같이 웹 페이지가 reload된다.

 

css의 수정은 index.css 파일을 수정하면 된다.

아래 코드 처럼 index.css 파일을 수정하고 저장하면 웹 페이지가 자동으로 reload된다.

reload된 웹 페이지

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231

웹 프론트엔드 시작하기 (리액트&리덕스)