react
useEffect hook
useEffect 함수는 리액트 컴포넌트가 렌더링 될때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. component가 mount, unmount, update 됐을 때 설정해 놓은 특정 작업을 처리할 수 있어서 리액트 기반의 어플리케이션을 만들 때 굉장히 유용하게 많이 사용된다. useEffect이 사용되는 시점을 중요하게 두고 프로젝트에 사용하다보면, 어떻게 적절히 사용할 수 있는지 더 깊게 알게 될것이다. useEffect는 기본적으로 다음과 같은 형태를 가지고 있다. useEffect(function, deps) - function : 수행하려는 작업 - deps : 배열의 형태로, 구독하고자 하는 값 또는 빈배열 1. Component가 mount 되었을 때 (처음 페이지가 렌더링 될때..
React State and Life Cycle (리액트 state와 생명주기)
1. State 리액트는 뷰의 단위가 컴포넌트로 구성되고, 이 컴포넌트를 통해 UI 를 재사용이 가능한 여러 조각으로 나눈다. 리액트로 프로젝트를 만들 때 우리가 주목해야 하는 부분은 props와 state다. 각 컴포넌트는 상위에서 하위 컴포넌트로 값을 전달하여 사용할 수 있는데, 이 때 이 전달되는 값을 props라고 한다. state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. props와 state는 일반 JS객체로, 두객체 모두 랜더링 결과물에 영향을 주는 정보를 갖고 있다. 그러나 한가지 중요한 방식에서 차이가 있는데, 변경 가능한 점에 대한 부분이다. props는 부모 구성요소에서 설정한 정보를 포함하며 변경할 수 없는 불변성의 특징이 있다. state는 구성요소가 자체적으로 초기화, ..
React Component
1. 리액트가 하는 일 리액트는 핵심 모듈 2개로 일을 한다. 1. 리액트 컴포넌트 => HTMLElement 연결하기 (페이지 전체라고 볼수 있다. ) 2. 리액트 컴포넌트 만들기 1. import ReactDOM from 'react-dom'; 2. import React from 'react'; 사용예시 ReactDOM.render ( , document.getElementById('hello-example') ); // React 컴포넌트 class HelloMessage extends React.Component { render() { return ( Hello {this.props.name} ); } } // HTMLElement ReactDOM.render ( , document.getEle..
React 입문_2
1. Angular vs React vs Vue 비교 npm trend를 보면 가장 사용이 많이 되는 모던 라이브러리는 React다. 1.1 Angular Angular는 React 전에 있던 프레임 워크로, 하나의 프레임워크로 프로젝트를 진행할 수 있게 한다는것을 추구한다. 이미 프레임이 정해져 있기 때문에 자유도가 거의 없다. Angular는 버전 1에서 버전 2로 되면서 완전히 다른 것으로 바뀌었다. 버전 2에서 typescript로 바뀌면서 기존 버전에서 완전히 단절되면서 Angular의 사용자가 많이 유출되었다. 1.2 React React는 라이브러리로, 유저 인터페이스(view)를 다루고 관리하기 위해서 만들어진 라이브러리다. 오직 Rendering과 Update에 중점을 둔 tool로써, ..
React 입문
1. React 개발 배경 애플리케이션의 규모가 커지며 복잡해질수록 처리해야 할 이벤트도 다양해지고, 관리해야할 상태값이나 DOM도 다양해지게 된다. 이에 따라 업데이트 등을 할때도 작업이 많이 복잡해지게된다. 이러한 문제점을 해결하기 위해 다양한 프레임워크가 만들어져서 업데이트 하는 작업을 간소화시켜 주었다. 하지만 리엑트는 업데이트를 간소화하는 방법에 초점을 둔것이 아니라, 처음부터 다시 새로 만드는 것에서 시작을 하게 되었다. 리액트에서는 virtual DOM 이라는 것을 사용하는데, 이는 가상의 DOM 으로 브라우저에 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM이다. 실제 DOM 이 아닌 JavaScript 객체이기 때문에 작동 성능이 빠르다. 리액트는 상태가 업데이트 ..