[복습] 제어컴포넌트의 기본
React Hook Form 써서 코드 짧게 쓰는 방법도 많이 사용된다. 또한, 유효성검사 라이브러리인 Yup 으로 유효성 검사 자동화하는 방법을 쓰는 것도 좋다.
[복습] 리액트 학습일지 [1] (모던 리액트)
State 가 업데이트 된 경우전달받는 Props 가 변경된 경우부모 컴포넌트가 리렌더링된 경우리렌더링 되더라도 State의 초기화는 생성시에 한 번만 수행된다.React Developer Tools 는 크롬, 엣지 등의 브라우저에서 다운 받아 사용할 수 있는 확장프로
[학습] 배열의 map, filter
map : 배열의 모든 요소를 순회하며 로직을 실행한다.출력결과index : 0 , element is 1index : 1 , element is 2index : 2 , element is 3filter : 배열의 모든 요소를 순회하며 참인 요소에 대해서만 로직을 실행
[학습] 패키지관리자
NPM 은 많은 사람들이 만들어 둔 패키지의 공개 저장소이며, 이를 이용하는 명령어는 npm 이다.아래와 같은 명령어를 이용하여 패키지를 설치할 수 있다.패키지를 설치하면 package.json 파일과 package-lock.json 파일이 자동으로 생성 및 업데이트
[복습용] 리액트 라우터의 사용 ( react router )
라우터는 페이지의 전환을 위하여 사용한다.a 태그는 페이지를 전환하면서 화면을 새로고침한다. 그러나, 라우터는 페이지를 새로고침하지 않으며 페이지를 전환할 수 있기 때문에 렌더링을 최소화하여 빠르게 화면전환이 가능하다.(1) 라우터를 설치한다. 라우터를 설치할 프로젝트
import 할 때 중괄호를 쓰는 이유
(1) export 할 때, default 로 지정된 대상은 import 할 때 중괄호를 쓸 필요가 없으며, import 할 때 이름도 마음대로 지정할 수 있다.(2) export 할 때, default 로 지정되지 않은 대상은 import 할 때 중괄호 { } 의 내
[복습용] State
리액트 16.8 버전부터는 함수형 컴포넌트에서 훅을 이용한 상태(State)의 관리가 가능하게 되었다.기본적인 훅useStateuserEffectuseContext추가적인 훅useReduceruseCallbackuseMemouseRefuseImperativeHandle
[복습용] 컴포넌트의 태그에 CSS 적용
컴포넌트에 포함되는 태그에 CSS 를 적용하는 방법(1) 태그에 직접 인라인 스타일로 적용하는 방법. 이 때, CSS 문법에서의 대쉬 "-"를 쓰지 않고, 카멜케이스로 적어야 한다. (예: border-right 대신에 borderRight 로 적는다 ) 하지만 큰 프
[복습용] 컴포넌트 작성
컴포넌트의 작성(1) 컴포넌트는 함수로 작성하며, 컴포넌트 이름은 대문자로 시작한다.(2) export 하여 다른 파일에서 사용할 수 있도록 한다.(3) return 값은 반드시 하나의 태그를 반환하도록 한다.
[복습용] 리액트 시작하기
<복습용>리액트 프로젝트 시작하기(1) 먼저 node js 를 설치한다.(2) 코드에디터(예 visual code 등)를 설치한다.(3) cmd 또는 power shell 같은 명령창에서 아래 명령어를 입력한다.(4) 코드에디터에서 만들어진 프로젝트 폴더를 열고
[React] import / require
require 는 node 의 모듈시스템아래의 두 코드는 같은 기능이다.// 노드에서는 require 만 사용가능하다const React = require('react');// 바벨이 import 를 require 로 바꿔준다.import React from 'reac
[React] webpack 설정하기
웹팩의 설치와 설정 node 설치 VS code 에서 프로젝트 폴더를 생성하고 터미널을 연다. npm init 을 입력하여 프로젝트를 초기화 한다. (npm : 노드패키지매니저) npm i react react-dom 을 입력하여 설치한다. npm i -D webpack webpack-cli 를 입력하여 설치한다. (-D : 개발용) npm i -D @b...
