<aside> ❗ 이번 주차에서는 React를 본격적으로 사용하게 됩니다. 따라서 이전 강의에서 배운 것과는 다른 용어나 로직들이 등장합니다. 강의 영상만으로는 설명이 부족한 부분들을 적어놓았어요. 이 페이지의 목차를 확인하고, 강의 영상을 시청하면서 나오는 부분을 봐주시면서 공부해주세요!

</aside>

Button.js 컴포넌트 생성 (파일 분리)

#5.1 강의 영상에서 새로운 파일에 Button.js를 생성하고, 이를 App.js에서 불러오고 있어요

function Button({text}) {
    return <button>{text}</button>
}

export default Button;

import Button from "./Button"

function App() {
  return (
    <div className="App">
      <h1>Welcome back!</h1>
    </div>
  );
}

export default App;

여기서 import / export는 무엇일까요?

이 키워드들은 변수나 함수, 자료형을 다른 파일로 저장해둔 뒤에 불러올 때 사용해요. 원하는 데이터 파일을 export하고, 불러와서 적용할 파일에 import를 한다고 생각하면 돼요! 즉, 강의 영상에서는 Button.js파일을 export하고 있고, 이 파일을 App.js에서 import하고 있는 거예요!

파일의 상대경로 ( ./ )

파일을 import해올 때, from 뒤에 “./Button”이라고 붙였는데, ./는 무엇일까요?

./는 파일의 상대경로로, 내 파일과 같은 폴더에 위치해있는 파일들에 접근할 수 있어요. .와 /의 개수에 따라 경로를 따라가 각 경로에 있는 파일에 접근할 수 있어요. 글로만 보면 헷갈릴 수 있으니, 파일 구조를 보며 설명해드릴게요!

여기서 우리는 depth 라는 용어를 사용할 건데, 파일이 어디까지 안으로 들어있나?의 정도를 나타내요.

• depth 0 루트 폴더 (react-for-begineers)
• depth 1 폴더 : public, src
• depth 2 favicon.icon, index.html, App.js, Button.js, …..

1. 동일 폴더 내 파일

   : 같은 폴더내 파일을 가져올 땐 ./뒤에 파일명을 입력하면 됩니다. 예를 들어 a1이 a2을 import하려면 파일 상단에 다음과 같이 코딩하시면 됩니다.

   import Button from "./Button"
   

2. 외부 폴더에 있는 파일

   : 폴더 외부의 파일을 가져올 땐 가져올 파일이 속한 폴더의 depth를 살펴보셔야 해요. 만약 지금 내 파일의 폴더 보다 상위 depth라면 depth만큼 ../를 추가해주셔야 합니다.

   예를 들어 App.js에서 logo192.png를 import한다고 했을 때, 다음과 같이 코딩하시면 됩니다.

   import logo from "../logo192"
   

콘솔에 같은 내용이 두 번 찍힐 때,

#6.1에서 초반 코드를 시행하고 렌더링을 할 때 위와 같이 두 번이 출력되실 거예요