지금 부터 리액트란 무엇인지 알아보도록 하겠습니다.리액트는 페이스북에서 성능을 아끼고 사용자 경험을 제공하기 위해 구현한 라이브러리 입니다.리액트는 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는데 사용합니다. 구조가 MVC, MVW등인 프레임워크들과 달리 오직
지금부터 리액트의 특징을 알아보도록 하겠습니다.Dom이란?브라우저에서 객체를 문서 구조로 표현하는 방법. 트리형태의 구조를 가짐Virtual Dom이란 Dom의 가벼운 사본과 비슷합니다.리액트에서는 Dom에 업데이트를 하기전에 다음과 같은 절차를 가집니다.데이터 업데이
지금부터 리액트 프로젝트를 생성해서 리액트에 대해서 알아보도록 하겠습니다.리액트 설치를 위해 nodejs를 설치합니다. nodejs설치시 npm도 같이 설치 됩니다.cmd 창을 열어 프로젝트를 생성할 경로로 이동합니다.npm init react-app <프로젝트
JSX는 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생겼습니다. 보기 쉽고 익숙하다활용도가 높다.ReactDom.render란?컴포넌트를 페이지에 렌더링 하는 역할을 코드입니다. react-dom 모듈을 불러와 사용할 수 있습니다. 첫번째 파라미터 : 페이지를
컴포넌트는 특정부분이 어떻게 생기지를 정하는 선언체를 말합니다. 컴포넌트는 클래스형, 함수형 두가지가 존재합니다. 지금부터 컴포넌트에 대해서 자세히 알아보겠습니다.클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있습니다.클래스형 컴포넌트는 r
사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트 라고 합니다.리액트의 이벤트 시스템은 웹브라우저의 HTML이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.컴포넌트 생성 및 불러오기이벤트 핸들링 하기임의 메서드 만들기input여러개 다루기onk
HTML에서 DOM요소에 id,name을 붙히듯이 리액트 내부에서도 DOM에 이름을 다는 방식이 있습니다. 바로 ref(Reference) 개념 입니다.기본적으로 state나 useState를 사용하여 이벤트를 핸들링 하나, 이것으로는 할 수 없는 이벤트를 발생시켜야
반복되는 코드를 작성할 때 map함수를 사용하여 컴포넌트를 렌더링 할 수 있습니다. \* map문법 \* map문법 예제 key는 컴포턴트 배열을 렌더링 했을때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다. \* key설정 key값을 설정할때는 map함수의 인자
모든 리액트에는 라이크사이클(수명주기)이 존재합니다.라이프 사이클은 클래스형 컴포넌트에서만 사용이 가능합니다.라이프 사이클 메서드의 종류는 총 9가지 입니다. \* 접두사에 따른 메서드 Will접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드Did접두
Hooks는 리액트 v16.3에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있습니다. 지금 부터 Hook에 대해 알아보도록 하겠습니다. useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수
리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리 입니다.리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다.리덕스의 대해서 알아보도록 하겠습니다.1\. 액션객체상태에 어떠한 변화가 필요하면 액션이
리액트 애플리케이션을 리덕스를 사용해서 관리를 하게 되면, 컴포넌트 파일과 별개로 상태업데이트 모듈을 관리 할 수 있기 때문에 유지보수에 좋습니다. 가장 많이 사용하는 리덕스 패턴은 프레젠테이셔널 컴포넌트 컨테이너 컴포넌트 이 두가지로 분리 해서 사용하는 패턴입니다.