React
useEffect hook
useEffect 함수는 리액트 컴포넌트가 렌더링 될때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. component가 mount, unmount, update 됐을 때 설정해 놓은 특정 작업을 처리할 수 있어서 리액트 기반의 어플리케이션을 만들 때 굉장히 유용하게 많이 사용된다. useEffect이 사용되는 시점을 중요하게 두고 프로젝트에 사용하다보면, 어떻게 적절히 사용할 수 있는지 더 깊게 알게 될것이다. useEffect는 기본적으로 다음과 같은 형태를 가지고 있다. useEffect(function, deps) - function : 수행하려는 작업 - deps : 배열의 형태로, 구독하고자 하는 값 또는 빈배열 1. Component가 mount 되었을 때 (처음 페이지가 렌더링 될때..
SPA (Single Page Application)
SPA를 이해하려면 우선 서버와 클라이언트의 관계를 이해해야 한다. User가 서버에 html 을 요청하면 서버에서 모든 html을 보내주었던 방식이 전통적인 서버 사이드 방식이다. 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아 렌더링을 하면 속도가 느려지고 트래픽도 낭비된다. 그래서 최근에는 클라이언트 사이드 방식으로 우선 애플리케이션을 브라우저에 로드한 다음 필요한 데이터만 서버에서 전달받아 다시 렌더링을 한다. 이러한 클라이언트 사이드 방식은 SPA에서 사용되는 방식이고, SPA 구현에 리액트가 사용될때 라우터가 필요하다. 라우터를 이해하기 위해 먼저 SPA가 무엇인지 알아보겠다. 1. SPA 란 SPA는 Single Page Application 의 약자로, 페이지가 1개인 어플리케이션이란..
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 객체이기 때문에 작동 성능이 빠르다. 리액트는 상태가 업데이트 ..