1. CRA
개발환경 세팅을 마쳤으니 이제 react app을 만들어 볼 차례이다.
CRA 는 Create React App의 약자인데, 한 줄의 명령어로 React 프로젝트 개발에 필요한 요소들을 자동으로 구성하는 방법이다.
1.1 CRA로 프로젝트 생성
cd dev
yarn create react-app test-1
프로젝트를 만들고 싶은 디렉토리로 이동 후 명령어 입력
1.2 CRA로 생성한 프로젝트 실행
cd test-1
yarn start
프로젝트 디렉토리로 이동 후 프로젝트 시작
이 화면이 나온다면 성공!
1.3 절대경로 지정
(1) root 경로에 jsconfig.json 파일 생성
(2) 다음 내용 작성
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
이렇게 해주면 ./를 사용하지 않아도 된다.
2.React Component
2.1 React Component란?
- 컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
- 개념적으로 컴포넌트는 JavaScript 함수와 유사하다.
2.2 Component를 보는 방법
컴포넌트 코드를 볼 때는 역역을 나눠서 보면 편하다.
컴포넌트 밖에선 필요한 파일을 import하거나 export하는 코드가 있다.
안에선 자바스크립트를 쓸 수 있는 부분이 있다.
그리고 return을 기준으로 아랫 부분에선 JSX를 작성할 수 있다.
- 주의사항
- 컴포넌트의 첫 글자는 대문자
- 폴더는 소문자로 시작하는 카멜케이스, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.
2.3 Component 만들어보기
import React from 'react';
function App() {
function handleClick(){
alert(`클릭!`);
}
return (
<div
style={{
height: '100vh',
display: ' flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<p>이것은 내가 만든 App컴포넌트 입니다.</p>
<button onClick={handleClick}>클릭!</button>
</div>
);
}
export default App;2.4 부모-자식 Component
컴포넌트 안에 컴포넌트 넣기
- 컴포넌트는 다른 컴포넌트를 품을 수 있다. 이때 품는 컴포넌트가 부모, 품어지는 컴포넌트가 자식 컴포넌트이다.
function Child(){
return <div>나는 자식</div>;
}
function App(){
return <Child />;
}App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있다.
3. JSX (JavaScript + XML)
3.1 JSX란?
JavaScript의 확장 문법으로 React Element를 생성하기 위한 문법
이전 포스팅에서 언급했듯 리액트엔 하나의 index.html만 존재한다.
그래서 리액트에서 뷰를 그릴 땐 JSX 문법을 사용해 React 요소를 만들고 DOM에 렌더링 시켜 그리게 된다.
3.2 주의사항
1개의 엘리먼트만 반환
return (
<div>
<p>Hello!</p>
</div>
);이렇게 가장 바깥을 태그로 묶어 하나의 엘리먼트만을 반환해야 한다.
javascript 값 가져오기, 문법 사용
const name = "Jinwoo";
return (
<div>
hello {name}
</div>
);값을 가져올 땐 중괄호를 사용해줘야 한다.
const number = 1;
return(
<div>
<p>{number > 10 ? number+'은 10보다 크다':number+'은 10보다 작다'}</p>
</div>
);위와 같이 javascript 문법을 사용할 때도 중괄호를 사용해줘야 한다.
class가 아닌 className
JSX로 작성하는 태그 내에서 클래스 명을 지정할 땐 속성 값을 className으로 사용해야 한다.
<div className="APP>style 주기
<p style ={{
color:'orange',
fontSize:'20px',
}}>
orange
</p>중괄호를 두번 쓰는 이유는 앞서 말했듯 자바스크립트 문법이나 내용엔 중괄호를 사용해줘야 하는데 객체 역시 자바스크립트이기 때문이다.
객체의{} + JSX문법 {}
