React 프로그래밍 기본적인 구조 create-react-app

React 프로그래밍을 시작했다. 기존에 파이썬 Django 프레임워크를 이용해서 웹사이트를 만들었는데, 이제는 React를 이용해서 만들어 볼 생각이다. React는 찬찬히 보니 컴포넌트로 이루어져 있다. 컴포넌트들을 조합해서 웹사이트를 만드는 것이다. React 프로젝트를 시작할 때는 create-react-app 이라는 npm 패키지를 설치해서 사용한다. create-react-app 을 사용하면 기본적인 프로젝트 템플릿을 만들어주고, 필요한 패키지를 설치해준다.

create-react-app 사용방법은 다음과 같다.

create-react-app [프로젝트명]

create-react-app 으로 생성된 프로젝트 디렉토리를 보면 node_modules, public, src로 구성되어 있다. node_modules는 npm으로 설치된 패키지들이 들어 있다. public은 static 파일들을 넣는 디렉토리이고, src는 React 컴포넌트나 컨테이너 등을 넣는 디렉토리이다.

React 프로그래밍에 필요한 패키지는 react가 필요하고, 라우터를 사용하려면 react-router-dom 패키지가 필요하다. 그리고 api를 통해 데이터를 가지고 오려면 axios패키지를 설치하면 된다.

React는 먼저 컨테이너를 만들고, 그 안에 컴포넌트들로 구성하면 된다. 컨테이너는 화면이라고 생각하면 되겠다. 일반적인 웹사이트를 보면 각각의 URL 주소에 해당하는 화면들이 있다. 그거랑 비슷하다고 생각한다. 컴포넌트는 그 화면 안에 있는 각각의 조각들을 만들어 놓은 것이다. 컴포넌트 한 개를 만들면 다른 화면에 재사용할 수 있다.

이렇게 화면을 대충 만들고 나면 데이터를 가져오기 위해 axios를 사용한다. axios.get 으로 api에서 원하는 데이터를 가져올 수 있게 함수를 만들고, componentDidMount를 호출 할 때 해당 함수를 실행시키면 된다. 백엔드는 Django Rest Framework를 사용하거나, nodejs express로 서버를 구성해서 만들 수 있다.

일단 이정도만 알면 간단한 웹사이트를 제작할 수 있을 것 같다. 그 다음에 좀 더 깊숙히 React를 알아가야겠다.