React

리액트란? 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC,MVW인 프레임워크와 달리, 오직 V(View)만 신경쓰는 라이브러리입니다. 컴포넌트 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를

VS Code > 파일 > 열기 메뉴를 선택하여 create-react-app으로 만든 hello-react 디렉터리를 엽니다.그 다음 src/App.js 파일을 엽니다.리액트를 불러와서 사용하려면 리액트 모듈을 설치하고,import React from 'react';

컴포넌트를 선언하는 방식은 두가지 입니다.1\. 함수 컴포넌트2\. 클래스형 컴포넌트함수 컴포넌트는 코드가 다음과 같은 구조로 이루어져 있습니다.클래스형 컴포넌트는 코드가 다음과 같은 구조로 이루어져 있습니다.클래스형 컴포넌트와 함수 컴포넌트의 차이점은 클래스형 컴포넌

사용자가 웹브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트(event)라고 합니다.이벤트 이름은 카멜 표기법으로 작성합니다.이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다.DOM 요소에만 이벤트를 설정할 수 있습니다.리액트에

일반 HTML에서 DOM 요소에 이름을 달때는 id를 사용합니다.DOM 요소의 id이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference) 개념입니다."DOM을 꼭 직접적으로 건드려

자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다.callback : 새로운 배열의

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다.컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다.라이프사이클 메서드의 종류는 총 아홉가지 입니다.Will 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.useSt

일반 CSS : 컴포넌트를 스타일링 하는 가장 기본적인 방식Sass : 자주 사용되는 CSS 전처리기(pre-processor)중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있음CSS Module : 스타일을 작성할 때 CSS 클래스가 다

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다.블로그 애플리케이션을 구현한다고 했을 때 어떤 페이지가 필요한지 생각해봅시다.글쓰기 페이지 : 새로운 포스트를 작성하는 페이지입니다.포스트 목록 페이지 : 블

Context API는 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있어 주로 프로젝트에서 전역상태를 관리할 때 많이 사용합니다.일반적으로 전역적으로 필요한 상태(환경설정, 사용자 정보 등)를 관리해야할 떄

웹 애플리케이션에서 서버 쪽 데이터가 필요할 떄는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신합니다. 이렇게 서버의 API를 사용해야 할 떄는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지