230303 - React - npm과 npx, prop

오늘 내가 배운 것

1. npm과 npx

2. prop

 

 

1. npm과 npx

 

리액트를 배우면서 webpack를 이용해서 작성한 코드를 확인했었다. 

이때 사용한 명령어가 몇 가지 있는데 그중 3가지 방법에 대한 차이점에 대해서 작성했다.

 

$ npx webpack

$ npx webpack server

$ npm run dev

 

1-1. npx webpack

npx webpack 명령어를 이용하게 되면 설정해 둔 webpack.config.js 파일을 기반으로 해서 파일을 번들링 한다. 

설정해 둔 디렉토리, 파일이름으로 번들링을 해주고 이를 확인하기 위해서 직접 서버를 열어서 확인해야 한다.

 

 

1-2. npx webpack server

npx webpack serve 명령어는 webpack dev server을 실행하기 위한 명령어로 변경된 사항을 감지하고 브라우저에 새로고침 없이 변경 사항을 확인할 수 있게 해 준다. 

 

하지만 이 내용을 메모리에 생성하여 보여주는 것이기 때문에, 번들 파일이 생성되지 않는다. 번들 파일을 만들기 위해서는 npx webpack 명령어를 이용해서 번들 파일을 생성해야 한다.

 

 

1-3. npm run dev

npm run dev 명령어는 package.json 파일에 정의된 스크립트를 실행하는 명령어이다.
그렇기 때문에 이 명령어를 사용하기 위해서는 미리 package.json에 명령어를 정의해 두어야 한다.

 

//package.json
"script":{
    "dev": "webpack server"
}

 

이렇게 package.json에 설정해 뒀기 때문에 명령어를 사용할 수 있는 것이고, `npm run dev`를 이용해서 webpack server 명령어와 동일한 동작을 할 수 있게 해 준다.

명령어를 정의할 때 npx를 사용하지 않아도 되는 이유는 npm 명령어를 통해 현재 설치되어 있는 패키지 `webpack dev server`를 찾아서 실행하기 때문이다.

 

 

2. prop

 

리액트 컴포넌트를 만들고 렌더링 하는 방법 3가지 

// 방법 1
return <App />

// 방법 2
return <App></App>

//방법 3
React.createElement(App)

이 방법은 모두 같은 역할을 한다.

 

렌더링 하는 과정에서 `id="1"`이라는 prop를 전달하는 방법

 

// 방법 1
return <App id="1" />

// 방법 2
return <App id="1"></App>

//방법 3
React.createElement(App ,{id="1"})

 

이를 이용해서 렌더링을 진행한다면 App component에서 props로 전달받을 수 있다. 

여기서 id는 프로퍼티의 'key' 이므로 id가 아닌 원하는 대로 지정해서 전달해 줄 수 있다.

 

const App = (props) => {
    console.log(props.id) //1
}

 

props에 children 키도 있는데, 컴포넌트에서 자식 요소들을 나타내는 prop이다.

 

// 방법 1
return <App id="1">Hello</App>

//방법 2
React.createElement(App ,{id="1"}, "Hello")

 

위와 같은 방법 두 가지를 이용해서 자식요소를 전달할 수 있고, 이 내용은 해당 컴포넌트에서

 

const App = (props) => {
    console.log(props.id) //1
    console.log(props.children) // Hello
}

 

props 안에 요소로 뽑아서 사용할 수 있다. 

prop을 조금 더 간결하게 쓰기 위해서 구조 분해 할당을 하면 요소를 바로 이용할 수 있다.

 

const App = ({ id, children }) => {
    console.log(id) //1
    console.log(children) // Hello
}

 

 

---