npm install -g create-react-app
create-react-app 프로젝트명
리액트를 시작하기 위해서는 Node가 설치되어 있어야 하며 npm install로 리액트를 설치 후 create-react-app 명령어를 사용하여 프로젝트를 생성할 수 있다.
프로젝트 생성이 완료되면 위와 같은 파일과 폴더명이 나타난다.
완료 되었다면 터미널에서 npm start
명령어를 사용하여 브라우저에서 화면을 렌더링할 수 있다.
className
을 사용한다.리액트는 HTML이 아닌 JSX문법을 사용하기 때문이다.
<div className="App">
<div className="container"></div>
<h1>REASON</h1>
</div>
// 에러가 발생하는 코드
<div className="App"></div>
<div className="container"></div>
<h1>REASON</h1>
빈 태그나 div 등을 이용해 반드시 모든 태그를 하나의 태그로 감싸주도록 해야 한다.
// 빈태그를 사용
<>
<div className="App"></div>
<div className="container"></div>
<h1>REASON</h1>
</>
function App() {
let text = '임시 변수 텍스트';
return <div className="App">{text}</div>;
}
임의의 변수 1개를 만들었다. 중괄호 안에 변수 명을 작성하여 사용한다.
<div className="App">
<div style={{ color: 'skyblue' }}>안녕</div>
</div>
▲ 인라인 안에 작성하는 방법
function App() {
const myStyle = {
color: 'pink',
fontSize: '20px',
};
return (
<div className="App">
<div style={myStyle}>안녕</div>
</div>
);
}
▲ 변수 오브젝트 형태로 작성하여 넣는 방법
스타일을 오브젝트 형태로 작성할 때 font-size 대신 fontSize
로 작성하여 사용한다.(카멜케이스)
-
는 사칙연산 기호중 하나이기 때문이다.
'font-size'
라고 작은 따옴표 안에 작성해도 되지만 콘솔에서 Warning 메시지가 뜬다.
자주 변경되는 데이터는 변수 대신 state를 사용한다.
let [text, setText] = useState('변수 대신 state');
state에 대한 내용은 차차 공부하면서 작성해볼 것이다.
참고 자료
리액트 튜토리얼