명령어 복습하기

이번 시간에는 그동안 배운 명령어들을 간단하게 복습하고 넘어가 보도록 하겠다.

프로젝트 생성하기

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 안에 복잡한 태그들을 더 작성할 수도 있으니깐 이 값을 어떻게 활용하면 좋을지 다시 한번 고민해 보면 좋을 것 같다!

--

--

Sue Yoon

Sue Yoon

Raised in the US, living in Korea. Serving two cutest snooty pomeranians