코지 코더 React 2. 폴더구조, 컴포넌트 소개

저번 시간에 우리는 React를 깔아보았다.

수업에 들어가기 앞서 복습하는 시간을 가져보겠다.

React를 깔기 전에 npm을 사용하기 위해 먼저 node.js를 설치하였다.

이후 cmd를 켜서 npm install -g create-react-app을 명령해 React를 설치했다. 그리고 원하는 파일로 이동하여 (드라이브 이동시에는 [드라이브 명 :] , 상위 폴더는 [cd..] , 하위폴더는 [cd 파일명\하위 파일]을 이용해 이동) create-react-app 폴더명를 입력해 프로젝트를 생성하면 해당 폴더를 vscode로 켰을 때 React가 나타나게 된다.

----------------------------------------------------------

내부 파일들에 대해 살펴보자

src는 소스코더로 개발할 때 쓰는 코드가 src폴더 안에 대부분 들어가게 된다.

이 안에 있는 파일들로 아까 전에 npm start를 했을 시 나왔던 화면이 출력된다.

그렇다면 어떻게 이 화면이 나왔는지 살펴보자.

index.js파일을 열어보면 다음과 같이 나온다.

먼저 import된 것들을 살펴보면 React from 'react'로 되어있는데 이것에 대해 알려면 src폴더 밖에 있는 package.json파일을 열어봐야 한다.

이렇게 구성되어 있는데 우리가 리액트를 처음 설치했을 때 react와 react-dom이 들어가있는 것을 볼 수 있다.

우리는 이것들을 import하여 가져와 사용한다.

그리고 css를 import한 것도 보이고 App 컴포넌트를 import해서 아래 사용하고 있는 것을 확인할 수 있다.

React-dom을 이용해서 우리가 원하는 컴포넌트를 랜더링할 수 있는데 이때 다음과 같이 작성해야 한다.

ReactDOM.render(element, container[, callback])

//위와 같이 작성하여 다음과 같이 코드를 작성한 것.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')

컨테이너는 public을 열어보면 id가 root인 것을 확인할 수 있고 컴포넌트를 root안에 넣는다는 의미이다.

그리고 StrictMode라고 코드에 적혀있는데 StrictMode란 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로 개발모드에서만 활성화 된다. 그래서 사실 StrictMode를 지우고 <App/>이라 써도 상관없다.

다음 살펴볼 것은 App컴포넌트 코드가 담긴 App.js이다.

화면에 보였던 글들이 여기에 적혀있는 것을 확인할 수 있다. 또한 logo가 import되어있는 것을 볼 수 있다.

원래 React에서는 class를 이용해서 컴포넌트를 만들었다. 그러나 hook이 등장하면서 함수로 작성하기 시작했다. 그래서 기존에 만들어진 React는 class로 작성되어있고 최근 것은 함수로 작성되어있기에 둘 다 다룰 줄 알아야 한다.

위의 함수를 보면 function app이후 곧바로 return이 입력된다. 그리고 그 리턴 값에 JSX가 들어가게 된다.

JSX란 문자열, HTML도 아닌 JavaScript를 확장한 문법이다.

App.js파일을 보면 class가 아닌 className으로 적은 것을 보면 확실히 HTML이 아닌 것을 확인할 수 있다.

이처럼 return값에 JSX를 입력하고 export(객체나 함수를 모듈화 시켜 내보낼 때 사용)해준 다음 index.js에 넣은 것처럼 이용하는 것이 컴포넌트를 만들고 사용하는 방법이다.

 

즉 react를 import해주고 function을 만들고 JSX를 입력 후 export 한 다음 이걸 사용하고 싶은 파일에 import한 다음 ReactDOM.render(element, container[, callback])에 맞춰 사용해주면 컴포넌트가 작동하게 된다.

-------------------------------

이런 지식들을 알고 내 마음대로 페이지를 바꾸어보았다.

결과물

코드를 간단하게 개조한 결과 이처럼 입력한 글이 나오게 되었다.

여기까지 해본 소감은 처음에 js파일을 html에 가져왔을 때의 느낌을 비슷하게 받았다. 사용하는 문법이 다를 뿐이지 결국엔 컴포넌트를 만들고 그것을 가져와 적용시킨다는 개념이 비슷해 큰 틀은 이해하기 쉬웠다. 다만 이제 문법을 하나하나 알아갈 생각을 하니 그저 웃음만 나온다 하하하...