Studying Coding Studying Coding

propTypes 1. conponent의 props를 지정 2. props의 type을 지정 Method 1. import PropTypes from ‘prop-types‘; 2. MyComponent.propTypes = { name: PropTypes.string }; - MyComponent : component - name : props isRequired method MyComponent.propTypes ={ name:PropTypes.string, favoriteNumber : PropTypes.number.isRequired }

함수 component를 사용할때 다른 component 와 정보를 공유하기 위해 props를 사용한다. 1. props의 공식적인 사용 const MyComponent = (props) =>{ return my name is {props.name} } 2. 구조 분해 문법 const MyComponent = (props) =>{ const {name} = props return my name is {name} } 3. More simple const MyComponent = ({name}) =>{ return my name is {name} }

import React from 'react'; 리액트를 불러와 사용할수 있게 해준다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치됩니다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이죠. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 Node.js에서 가능한 기능이다. 이러한 기능을 브라우저에서도 사용할수 있게 하기위해 번들러 사용, 파일을 묶듯이 연결한다. 번들러로 웹팩을 사용한다. 번들러를 사용하면 import로 모듈을 불러 하나의 파일을 생성한다. 파일을 불러오는 것을 웹팩의..

DOM은 Document Object Model의 약어 , 객체로 문서구조를 표현하는 방법으로 XML, HTML으로 작성한다. 웹 브라우저는 DOM을 활용해 객체에 JS나 CSS를 적용한다. 리액트는 Virtual DOM 방식을 사용해 DOM업데이트를 추상화함으로써 DOM 처리횟수를 최소화 한다. 리액트에서 데이터가 변하면 1. 전체UI를 Virtual DOM에 리렌더링 합니다. 2. 이전 Virtual dom에 있던 내용을 현재내용과 비교합니다. 3. 바뀐 부분만 실제 DOM에 적용합니다. React Start $ npm init react-app npm start