![[2차 프로젝트] Myrealtrip Cloning (1)](https://miro.medium.com/fit/c/224/224/1*xX-xWuqcJtL_XTkFCTZt_A.png)
![[2차 프로젝트] Myrealtrip Cloning (1)](https://miro.medium.com/fit/c/112/112/1*xX-xWuqcJtL_XTkFCTZt_A.png)
명령어 복습하기
이번 시간에는 그동안 배운 명령어들을 간단하게 복습하고 넘어가 보도록 하겠다.
프로젝트 생성하기
npm init react-app .터미널에서 원하는 디렉토리에 들어가서 npm init react-app .를 입력하면 현재 디렉토리에 리액트 프로젝트를 생성한다.
개발 모드 실행하기
npm start (npm run start)터미널에서 npm run start를 입력하면 개발 모드 서버가 실행된다.
실행 중인 서버 종료하기
ctrl + c서버가 실행 중인 터미널에서 ctrl + c를 입력하면 서버가 종료된다.
개발된 프로젝트 빌드하기
npm run build터미널에서 npm run build를 입력하면 빌드를 시작한다.
빌드한 것 로컬에서 실행하기
npx serve build터미널에서 npx serve build를 입력하면 serve 프로그램을 다운 받고 build 폴더에서 서버가 실행된다.
Children
Props에는 children이라는 조금 특별한 property(prop, 프롭)가 있다.
JSX 문법으로 component를 작성할 때 component를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다.
Button.js
function Button({ children }) {
return <button>{children}</button>;
}export default Button;
App.js
import Button from './Button';
import Dice from './Dice';function App() {
return (
<div>
<div>
<Button>던지기</Button>
<Button>처음부터</Button>
</div>
<Dice color="red" num={2} />
</div>
);
}export default App;
그래서 JSX 문법으로 component를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고, 화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수가 있다.
참고로 이 children을 활용하면 단순히 텍스트만 작성하는 걸 넘어서 component 안에 component를 작성할 수도 있고, component 안에 복잡한 태그들을 더 작성할 수도 있으니깐 이 값을 어떻게 활용하면 좋을지 다시 한번 고민해 보면 좋을 것 같다!
