일안하고블로그

React-BootStrap 부트스트랩을 따로 배우거나 한 것은 아니지만, 회사에서 사용을 하고 있기때문에 사용법과 장점들을 많이 알고 있었던 상태에서 리액트에도 React-BootStrap이라는 라이브러리를 활용해서 적용 할 수 있다고 하여 정리를 하면 쉽게 쓸 수 있을 것 같아서 , 정리를 해봅니다. 참조 한 사이트는 여기 입니다. create-react-app으로 프로젝트를 만듭니다.$ create-react-app react-boot1설치가 완료 되었으면, 프로젝트 폴더 이동$ cd react프로젝트 이동후, 실행.$ yarn start화면이 나오면 성공입니다.다음으로, Command 혹은 Bash 창에서 start 프로젝트를 중지 합니다.정지 후, react-bootstrap을 설정해줍니다. $..

React 생명주기(LifeCycle) 리액트에서 정말 중요하지만 정리가 필요한 것이 리액트 생명주기입니다. 매번 할때 마다 구글링을 하고 정리가안되어 헤깔렸던 리액트 생명주기를 한번에 정리해 보겠습니다. 컴포넌트 초기생성컴포넌트 업데이트컴포넌트 제거 컴포넌트 생성과정 See the Pen [React LifeCycle] 컴포넌트초기생성 by 최대한 (@sheldhe) on CodePen. 위의 예시에서 Result 버튼을 누르시고 console을 확인하시면 테스트 결과를 확인 할 수 있습니다. 컴포넌트 생성과정 constructor -> componentWillMount -> render -> componentDidMount 컴포넌트의 실행과정을 살펴 보겠습니다. constructor : 컴포넌트 생성..

React PropTypes 리액트 TypeChecking PropTypes를 정리하기위해 사이트를 참조하였습니다.리액트 앱이 커지면서 여러 유형 검사를 통해 많든 버그들을 발견 할 수 있게되었습니다. 일부 응용 프로그램인 TypeScript나 Flow와 같은 자바스크립트 확장 응용 프로그램으로도 검사를 할 수 있습니다. 하지만, 리액트 자체적으로도 TypeChecking 기능을 내장하고 있습니다. 또한 리액트 PropTypes를 통해 버그만 잡는 것이 아닌 가독성향상 및 커스텀화로 중요성이 커지고 있습니다. 지금부터 예제를 통해서 하나씩 설명해 보도록 하겠습니다. 알아두어야 하는 내용React.Proptypes는 15.5버전 부터 다른패키지로 옮겼습니다.prop-types 라이브러리를 사용 할 것입니다..