React 입문하기 2. React설치와 component 만들기

리액트를 사용하기 위해서는 몇 가지 프로그램의 설치가 필요하다.
1. node.js (npm이 포함)
2. yarn (npm을 대체 할 수 있는 도구)
3. visual studio code

세 가지 모두 최신버전으로 설치해준다.

전부 다운 받고 나서, 리액트 작업을 할 폴더 하나를 만들어주고(쉽게 찾으려면 폴더를 바탕화면에 만들어주자.),
vscode에서 해당 폴더를 열어준다.
vscode의 터미널에서 npm을 설치, 다운받아주고, (터미널은 Git Bash에서도 가능.)
npm으로 프로젝트 폴더를 만든다. -> 만약, npx로 만들어주면 일회성이 된다.(프로그램이 한 번만 실행된 후 삭제됨.)
이후, 프로젝트 폴더경로로 들어가 리액트를 실행시킨다.

완성된 프로젝트 폴더를 보면, public과 src 폴더가 있다.
public내에는 빈 HTML 껍데기 파일이 있고,
우리는 src내의 js와 css파일을 만들고, class를 통해 컴포넌트를 생성해서
빈 HTML에 넣어 사용 할 것이다.

리액트 컴포넌트를 만드는 예시를 보자면,

첫 줄은 컴포넌트를 만들기 위해 필요한 React 요소인 component를 받아오기 위해 써준다.

 

이후, class를 사용자 정의명(Content)으로 선언해주고, Component를 상속받는다.

마지막, export default Content로 해당 컴포넌트를 내보내서 재사용 할 수 있게 한다.

 

 

참고 : www.youtube.com/watch?v=nvRlr_qPfBc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=4

---

npm : node.js을 이용해서 만들어진 여러 가지 기능들을 명령어 환경에서 설치할 수 있도록 도와주는 log.