CheolCheol Dev Note

React도 Angular와 마찬가지로 Lifecycle이 있다. class로 만들 때 사용가능 하며, velopert 블로그를 보고 정리한다. 컴포넌트가 브라우저에 나타나기전constructor 컴포넌트가 새로 만들어질 때 componentWillMount - 컴포넌트가 화면에 나타나기 직전 - 더 이상 필요하지 않아 16.3 부터 deprecated - UNSAFE_componentWillMount() componentDidMount - 컴포넌트가 화면에 나타났을 때 - 외부라이브러리 연동, 데이터 요청, 속성 변경등등 작업 컴포넌트 업데이트 (props, state의 변화에 따라) componentWillReceiveProps - 컴포넌트가 새로운 props를 받을 때 - state가 props에 ..

React with Typescript 세미나 강의를 듣고 정리하며 공유한다. React 에는 부모 컴포넌트로부터 데이터를 받을 수 있는 props와 component안에서 사용할 수 있는 state가 있다. props와 state의 정의 및 특징(출처: React with Typescript 세미나 강의) 다음은 props와 state 예제이다. // App tsx // React typescript이기 때문에 Props인터페이스와 State를 만들어 줘야한다. export interface Props { name: string; company?: string; } interface State { age: number; } class App extends React.Component { static d..

리액트는 기본적으로 Babel-loader를 사용하는 방법과 typescript-loader를 사용하는 방법이 있다. 그리고 npm이나 yarn 의 패키지 모듈로 설치할 수 있다. 여기서 npm은 자주 접해 익숙하나 yarn은 React를 사용해보며 처음 들어보는 모듈이였다. 간단히 설명하면 yarn은 npm의 단점을 보안하며 안정적이며 빠르며 보안성이 뛰어나도록 만든 새로운 패키지 매니저이다. npm install --global yarn 으로 설치를 할 수 있다. 그리고 React Project를 생성하기 위해 create-react-app을 설치해야 한다. create-react-app을 사용하기 전에는 프로젝트를 만들고 폴더를 생성하고 webpack/babel 등을 설정하고 귀찮았는데 create..

React with Typescript 세미나 강의를 듣고 정리하며 공유한다. React는 페이스북이 만든, MVC 패턴 중V를 담당하는 라이브러리 M이나C는 다른 라이브러리나 패키지로 보완해주어야 한다.(Redux나MobX, react-router와 함께 프레임워크처럼 사용) Angular는프레임워크React는UI구성요소라이브러리UI 컴포넌트를 만드는 일만 하며 캡슐화를 잘 시켜줘서 재사용 성이 높다.한가지 일만하여 단순하고 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있다 Angular는 금융권, React는 엔터테인먼트분야 라고 확정 지을 수는 없지만 지표가 있다. angular vs react 비교 (Angular는 프로젝트도 해지만 React는 스터디만 해서 잘은 모르겠지만 비교를..