React.js란 무엇이고 왜 쓰는가?
공식 홈페이지 설명 - React는 UI를 만들어 주는 자바스크립트 라이브러리다.
간단한 웹 페이지 작업에는 필요하지 않지만,
인터랙티브한 웹 페이지를 만들 때에는 React를 사용하면 작성해야 할 코드량이 확 줄어 아주 유용하다.
기존 자바스크립트를 활용하면 명령적 방식을 사용하여 코드를 작성하지만,
리액트를 사용하면 선언형 방식으로 코드를 작성할 수 있다.
화면에 표시할 UI 코드를 작성하고, 이벤트 리스너를 추가하는 코드나 동적인 값을 HTML 코드에 넣어주고 리액트 기능을 더해준다. 예를 들어 상태를 정의하고, 어떤 상황에서 이 상태를 활성화할지 등의 코드를 추가한다.
그러면 React.js가 알아서 브라우저에 전달할 명령을 만들어 낸다. 그래서 개발자는 명령을 하나하나 작성할 필요가 없게 된다.
React 프로젝트에 필요한 것
바닐라 자바스크립트를 사용할 때 프로젝트를 생성한다는 것은 단순히 폴더를 생성하고,
그 안에 HTML 파일과 js 파일, CSS파일을 넣기만 하는 것이었다.
리액트를 사용하여 웹 페이지를 생성할 때는 그렇게 간단하지만은 않은데,
리액트 프로젝트는 백그라운드에서 코드를 자동으로 변환해주는 작업을 포함해야 한다.
또한 개발자 경험을 위해 코드의 변경사항을 실시간으로 볼 수 있어야한다.
코드 변환 작업이 필요한 이유는 리액트는 하나의 자바스크립트 파일에서 작업을 하는데,
브라우저는 이 코드를 실행할수 없기 때문에 이 자바스크립트 코드는 유효하지 않다.
그래서 이 자바스크립트 코드를 브라우저에서 실행 가능한 클라이언트 코드로 변환(컴파일) 하는 작업이 필요하다.
React 프로젝트를 생성하는 방법
React 프로젝트에 필요한 것들을 담은 프로젝트 생성 방법은 두가지가 있다.
create react appvite
어떤 도구를 사용하던 간에 두 가지 모두 Node.js 가 필요하다.
Node.js가 필요한 이유는 프로젝트 생성 도구 두가지 모두 Node.js를 이용하기 때문이다.
Node.js를 설치한 이후 새 프로젝트를 생성하려면
npx create-react-appnpm create vite이렇게 생성할 수 있다.
지금은 vite를 사용해볼 예정이다.
vite를 사용해 아래와 같이 프로젝트를 생성했다.
이후 create-react-app을 통해 프로젝트를 시작했다면 npm start 를
vite를 사용해 프로젝트를 시작했다면 npm run dev 를 입력해 프로젝트를 시작해준다.
터미널에 표시된 localhost:5173을 방문하면 react 앱 미리보기를 볼 수 있다.
React 구조 살펴보기
src 폴더 안에는 jsx 파일이 있는데, 이 안에 있는 HTML 코드를 지원한다.
브라우저에선 지원하지 않는 문법으로, 프로젝트 자체에서 자동으로 변환해준다.
function App() {
return <h1>Hello World!</h1>;
}
export default App;
위와 같이 HTML 코드를 자바스크립트에 포함시키는 것을 jsx라 한다.
또한 기본적인 css 스타일을 포함한 index.css 파일을 확인할 수 있는데,
이 파일도 결국엔 main.jsx에 import되어 사용된다.
이 방식도 브라우저에서 지원하지 않지만, 이 역시도 프로젝트가 알아서 변환해 적용시킨다.
변환된 결과를 보고 싶다면, 브라우저에서 개발자 도구를 실행해 확인할 수 있다.
head 섹션 안에 script와 style이 들어있는데, style 안에는 CSS 파일의 내용을 확인할 수 있다.
Source 탭을 보면 페이지가 로드될때 자바스크립트 파일도 로드되고 있는데,
main.jsx를 확인해 보면 변환된 js 코드만 존재하고, HTML 코드는 존재하지 않는걸 확인할 수 있다.
main.jsx 파일의 역할
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
이 파일은 진입점을 가지고 있는 전체 앱의 메인 파일이다.
브라우저에 웹사이트가 로딩될 때, 이 파일에 있는 코드가 제일 먼저 실행된다.
코드를 살펴보면, react와 react-dom을 import하는데
두 개의 패키지가 분리되어 있지만 같은 팀에서 생성한 것으로
두 패키지가 합쳐져서 리액트 라이브러리가 되는것이다.
main.jsx의 코드는 ReactDOM으로 시작되는데,
여기서 createRoot 라는 메소드를 호출한다.
이 메소드는 HTML 코드의 Element 포인터를 받는데,
그 부분은 document.getElementById라는 바닐라 자바스크립트 코드로 되어있다.
이 코드의 역할은 react에 시키는 작업을
root라는 id를 가진 요소 안에 이 리액트 코드를 render 하는 것이다. (화면에 뿌리는 것)
StrictMode가 하는 일은 리액트가 제공하는 특별한 기능인데,
우리가 작성한 코드가 최적인지 아닌지를 확인하여 알려주는 기능이다.
또한 추후에는 내가 작성한 코드가 호환되지 않거나 하는 상황에서 경고를 주는 역할을 한다.
여기서 가장 중요한 부분은 App 부분인데,
이 App은 import된 요소로, js 파일에서 HTML 요소처럼 이용되고 있다.
이 App은 App.jsx 파일을 의미한다.
App.jsx
function App() {
return <h1>Hello World!</h1>;
}
export default App;
이 함수는 간단하게 jsx 코드를 반환하기만 한다.
h1으로 둘러쌓인 HTML 요소를 반환하고 있는데,
이런 걸 바로 리액트 컴포넌트라고 한다.
리액트 앱을 빌드한다는 것은 결국 컴포넌트를 빌드하는 것이고,
컴포넌트는 JSX 코드를 반환하는 함수이다.
이론적으로 그 외의 것도 반환할 수 있지만,
보통은 JSX 코드를 반환한다.
따라서 JSX 코드를 반환하는 함수는 리액트 컴포넌트라 보면 된다.
리액트 컴포넌트는 다른 JSX에서도 사용될 수 있는데,
이 App이라는 함수는 main.jsx에서 HTML 요소처럼 활용되는 것이 그 예시이다.
render 함수는 HTML 코드를 받아야 하는데, JSX를 받아 화면에 출력하고,
App 컴포넌트를 받아 화면에 출력한 것이다.
커스텀 컴포넌트 만들어 보기
src 디렉토리 안에 components 디렉토리를 만들고, Post.jsx 파일을 생성한다.
create-react-app을 사용했을 경우 .js 확장자를 사용해도 되지만 vite를 사용한 경우 .jsx 확장자를 이용해야 한다.
function Post() {
return (
<div>
<p>Kangjik Kim</p>
<p>React.js is awesome!</p>
</div>
);
}
export default Post;
이렇게 Page.jsx에 Post 함수를 만들고 HTML 요소를 반환한 다음 export 해주면 커스텀 컴포넌트가 완성이 된다.
보통 React 프로젝트를 만들 때에는 root 컴포넌트를 하나만 두는데,
main.jsx에서 출력되는 컴포넌트를 하나만 둔다는 의미이다.
현재 main.tsx에서는 App 컴포넌트 하나를 다루고 있으므로,
Post 컴포넌트는 App 컴포넌트의 jsx 코드에 넣으려 한다.
아래와 같이 Post 컴포넌트를 import 하고, Hello World 대신 Post 컴포넌트를 반환하게 만든다.
import Post from "./components/Post";
function App() {
return <Post />;
}
export default App;
컴포넌트를 사용할 때에는 일반 js 함수처럼 Post() 와 같이 사용하는 것이 아니라,
HTML 요소처럼 와 같이 사용한다.
컴포넌트를 선언하는 곳에서는 소문자로 선언을 해도 무방하지만 일반적으로 앞글자를 대문자로 선언하고 있고,
컴포넌트를 사용하는 곳에서는 무조건 대문자로 사용을 해야한다. (;)
컴포넌트를 사용하는 곳에서 소문자로 시작을 할 경우, 리액트에서 기본 HTML 요소로 인식하기 때문이다.
바뀐 화면을 확인해 보면, 아래와 같이 새로 만든 Post.jsx 컴포넌트의 내용이 표시되는 것을 확인할 수 있다.
