React3 React - Life Cycle velopert님의 https://velopert.com/3631와 React 공식문서를 참고하였습니다. 리액트의 Life Cycle API에 대해서 정리하려고 한다. 이 API는 리액트의 컴포넌트가 브라우저에서 나타나고, 사라지고, 업데이트 될 때 호출되는 API이다. 각 시점에서 호출될 때 내가 실행하고 싶은 기능이나 코드가 동작하도록 할 수 있다. 리액트의 라이프사이클은 크게 mount, update, unmount의 3가지로 나눌 수 있다. 예제를 만들어서 각 시점에 어떻게 호출되는지 알아보려고 한다. $ npx create-react-app react-life-cycle Mount 컴포넌트가 만들어지고 렌더링 되는 과정이다. 여기에는 다음과 같은 method가 순서대로 호출된다. construc.. 2020. 3. 24. 리액트 개발환경 설정해보기 포트폴리오 사이트를 만들기 위해 리액트 개발환경을 CRA 없이 셋팅해보려고한다. 그전에 리액트 개발환경에 필수적인 바벨과 웹팩에 대하여 공부를 했었다. 간단하게 공부를 했었는데 이것을 이번엔 좀 더 프로젝트답게(?) 적용해보려고 한다. 리액트에서 바벨과 웹팩이 필수적인 이유는 다음과 같다. - babel : 리액트는 ES5/ES6 + jsx로 작성한다. 이것을 브라우저가 이해할 수 있도록 바벨이 ES6 -> ES5, jsx -> js로 트랜스 파일링을 해준다. (@babel/preset-env ,@babel/preset-react) - webpack : 리액트는 최종으로 번들된 js 파일이 연결된 html 파일을 로드하기 때문에 번들링이 필요하다. 그럼 저번에 만들었던 github pages 프로젝트에서.. 2020. 3. 16. React - HOC 이 글은 VELOPERT님의 https://velopert.com/3537을 보고 공부하면서 작성한 블로그입니다. Higher-Order Component (HOC) HOC는 React 공식문서에 따르면 다음과 같이 나와있다. 고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트는 그 자체로는 React API의 일부분이 아닙니다. 고차 컴포넌트는 React의 컴포넌트적 성격에서 나타나는 패턴입니다. 구체적으로 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 코드를 작성하다 보면, 반복해서 사용되는 코드나 자주 사용하는 코드를 함수화(모듈화)해서 사용할 때가 있다. 리액트에서도 컴포넌트를.. 2020. 3. 10. 이전 1 다음
