홍뉴홍로그 홍뉴홍로그

리액트에는 컴포넌트의 생성과 업데이트에 따라 호출되는 LifeCycle API가 존재합니다. 이러한 LifeCycle API가 언제 어떻게 동작하는지 알면 프로그램을 구현할 때 알맞은 액션을 알맞은 타이밍에 실행시켜줄 수 있습니다. 컴포넌트 초기 생성 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API constructor 컴포넌트 생성자 함수로 컴포넌트가 새로 만들어질 때 호출됩니다. componentWillMount 컴포넌트가 화면에 나타나기 직전 호출되는 API v16.3 이후로는 사라진 API로 기존에 이 API를 통해 했던 작업은 constructor 또는 componentDidMount에서 처리가 가능합니다. componentDidMount 컴포넌트가 화면에 나타났을 때 호출되는 API로..

리액트 프로젝트를 시작하기 위해서는 몇 가지 준비해야 할 것들이 있습니다. 1. Node.js Node.js는 자바스크립트 런타임입니다. 일반적으로 JavaScript는 크롬과 같은 브라우저에 내장되어 있습니다. 즉, 브라우저에 종속되어있었습니다. 이러한 JavaScript를 브라우저 밖에서 사용할 수 있도록 해주는 것이 Node.js입니다. 2. Webpack Webpack은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾아 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러입니다. 코딩할 때 생성된 여러 개의 모듈을 그대로 이용하는 것은 네트워크 비용 측면에서 좋지 않기 때문에 이를 하나의 파일로 묶어주는 역할을 하는 것입니다. 프로젝트 전체를 하나의 단위로 ..

React란 무엇인가? 리액트는 페이스북에서 만든 프론트엔드 라이브러리의 하나입니다. 웹 애플리케이션은 수많은 DOM엘리먼트를 통해 사용자와의 상호작용을 제공합니다. 이러한 DOM요소를 관리하는 것은 웹애플리케이션의 규모가 커질수록, 사용자와의 인터랙션이 많아질수록 어려운 일입니다. 웹 개발을 할 때, DOM관리와 상태값 업데이트 관리를 최소화할 수 있도록 돕는 것이 바로 프론트엔드 라이브러리의 역할입니다. React의 특징 리액트의 가장 큰 특징이라면 바로 virtual DOM을 꼽을 수 있을 것입니다. 기존의 라이브러리들은 대부분 MVC패턴을 바탕으로 이루어져 있습니다. 양방향 바인딩을 통해 데이터단을 담당하는 모델에서 값이 변하면, 뷰에서도 이를 변화시켜줍니다. 특정 이벤트가 발생했을 때, 모델에 ..