React
CodeSandbox
기타 설치 작업 필요없이 간단하게 React 개발을할 수 있는 사이트
create-react-app
해당 명령어를 실행해서 React Project를 수행하기 전에, PC에 Node.js가 설치되어 있어야 한다. 설치가 되어있으면 터미널 또는 커맨드 라인에 다음과 같은 명령어를 입력해서 프로젝트를 생성한다.
npx create-react-app [project name]
해당 명령어를 실행하면 사용자가 지정한 project name이라는 이름의 폴더가 생성된다. 생성되는데 시간이 좀 걸린다. 생성이 완료된 후, 생성한 코드 디렉토리에 가서 React를 기동시킨다.
cd [project name]
npm start
명령어를 실행시키고 인내심을 가지고 기다리면 https://localhost:3000/로 접속하게 된다. 웹 브라우저가 실행되면 React 개발 환경 세팅은 끝이다.
JSX
React 내부는 JS로 움직이고 있어서 .js 확장자로 작동시킬 수 있지만, 재사용성과 유지보수성을 높이기 위해 컴포넌트용 .jsx 확장를 사용해 컴포넌트를 정의한다. 과거에는 Class로 정의된 클래스 컴포넌트를 사용했지만 현재는 함수 컴포넌트가 주로 사용된다.
SPA에서 HTML 파일은 오직 한 개뿐이다. JSX 표기법에서 함수의 반환값(return)으로 HTML 태그를 작성하는데, 이것을 컴포넌트로 다뤄서 화면을 부품 조립하듯 구성하는 것이다.
import ReactDOM from 'react-dom';
const App = () => {
return null;
};
ReactDOM.render(<App />, document.getElementById('root'));<App />은 render의 대상으로 함수명을 태그로 감싸서 컴포넌트로 만들었다. document.getElementById('root')은 render 위치를 말하고 id로 root를 지정했다. 해당 id는 public 디렉토리의 index.html 파일에 있는 div를 가리킨다.
return 이후에 행이 1개면 위의 코드처럼 소괄호없이 HTML 태그를 반환해도 되지만, 2개 이상이라면 소괄호로 감싸서 반환해야 한다. 그리고 return 이후에 한 개의 태그로 둘러싸여 반환해야 한다!!!
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello React!</h1>
<p>처음 시작해봐</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));div를 제거하고 실행하면 JSX 규칙에 어긋나서 오류가 발생한다. div 태그를 사용하면 불필요한 DOM을 생성한다. 이러한 단점없이 사용할 수 있는 방법이 있다. 바로 Fragment나 생략 표기법(빈 태그)를 사용하는 것이다.
- Fragment
import ReactDOM from 'react-dom';
import { Fragment } from 'react';
const App = () => {
return (
<Fragment>
<h1>Hello React!</h1>
<p>처음 시작해봐</p>
</Fragment>
);
};
ReactDOM.render(<App />, document.getElementById('root'));- 생략 표기법(빈 태그)
import ReactDOM from 'react-dom';
const App = () => {
return (
<>
<h1>Hello React!</h1>
<p>처음 시작해봐</p>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));Component
그래서 컴포넌트는 어떻게 만드는 걸까? 위에서 작성한 App 코드를 다른 코드에 작성하고 이 코드를 다른 파일에서 사용할 수 있도록 export하게 한다.
export const App = () => {
return (
<>
<h1>Hello React!</h1>
<p>처음 시작해봐</p>
</>
);
};export를 하면 다른 파일에서 해당 컴포넌트를 improt하여 사용할 수 있다.
Event & Style
JS에서 이벤트 처리를 할 때 소문자 표기법을 사용했었다.(onclick)
리액트에서는 캐멀 케이스 표기법을 사용해서 이벤트를 처리한다.
- 캐멀 케이스 표기법?
onClick와 onChange 같이 단어가 연결되는 부분이 소문자가 아닌 대문자로 표기되는 것을 말한다.
export const App = () => {
const onClickBtn = () => {
alert('버튼을 클릭했어!');
};
return (
<>
<h1>Hello React!</h1>
<p>처음 시작해봐</p>
<button onClick={onClickBtn}>버튼</button>
</>
);
};이벤트 처리는 이렇게 간단하다. 그럼 스타일은 어떻게 적용할까? React에서도 style 속성에 스타일을 줄 수 있지만, CSS 요소는 JS 객체로 기술한다. 다음 코드를 보면서 스타일 적용 방법에 대해 이해해보자.
export const App = () => {
const onClickBtn = () => {
alert('버튼을 클릭했어!');
};
// CSS 객체
const pStyle = {
color: 'white',
background: 'grey',
};
return (
<>
<h1 style={{ color: 'blue' }}>Hello React!</h1>
<p style={pStyle}>처음 시작해봐</p>
<button onClick={onClickBtn}>버튼</button>
</>
);
};h1 태그에 style을 지정해 JS를 작성한 코드이다. style={ } 안에 객체로 CSS에 대응하는 요소를 지정해서 중괄호를 2번 사용해야 한다.
p 태그는 속성명에 CSS 객체를 지정해서 사용했다. 속성명을 사용해서 코드를 더 간결하게 사용할 수 있다.
