Props는 일종의 방식으로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. 1. 기본 사용 props 사용 방법 function Btn({text,big }) { return ( {text} } function App(){ return ( ); } export default App; props는 첫 번째이자 유일한 인자입니다. 인자로 obejct로 넘어온다. ex) {text:"Save Change", big:false} props는 object이기 때문에 “{}”중괄호를 열어 원하는 값만 뽑아올 수 있다. function Btn(props) => function Btn({text,big }) (ES6 문법) 2. 이벤트 리스너 사용 방법 (전체 코드) function Bt..

웹사이트를 만들다 보면 js, css, img 등 수많은 파일들이 생겨납니다. 완성된 웹사이트를 로딩해보면, 많은 파일들이 다운로드 되는걸 알 수 있습니다. 서버와의 접속이 많을 수록 어플리케이션은 느리게 로딩되기 때문에 이를 해결하고자 webpack이 나왔습니다. (웹팩이 무엇인지 보여주는 그림) (수많은 파일들이 로딩되는 어플리케이션) 1. webpack 라이브러리 설치 npm install -D webpack webpack-cli 옵션 -D : 개발을 위한 기능 들은 해당 옵션을 사용 webpack , webpack-cli : 두개의 패키지 설치 2. 사용 방법 2-1) 각각의 컴퍼넌트를 import 받는다. - hello.js var word = 'HELLO' export default word;..

Redux는 상태 관리 라이브러리로 state(변수)를 효율적으로 관리하기 위한 라이브러리 입니다. state를 내부 컴퍼넌트에서 사용하기 위해서는 props문법을 사용해야 합니다 하지만, 많은 컴퍼넌트 중첩이 발생할경우 그에 따른 props가 필요하기 때문에 Redux라는 라이브러리르 사용하면 편하게 사용 가능합니다 . Redux의 장점 장점 1. props를 사용하지 않아도 된다! (기존 props를 통한 state 전달 ) Redux를 설치하게되면 state를 보관하는 파일을 하나 만들수 있습니다. 여기에 모든 state를 보관합니다. (Redux를 통한 state 전달) 사용 방법 1-1) state 보관 파일 (store.js) 생성 import { Provider } from 'react-re..