개발블로그

NavLink react router에서 지원하는 기능 중 하나로 Link 컴포넌트처럼 페이지 이동이 가능하며 차이점은 특정링크에 스타일을 넣어 줄 수 있다는 것이다. NavLink는 자체적으로 isActive라는 boolean값을 가지고 있는데 활성화시키고싶은 스타일에 css를 설정하고, 활성화(클릭) 될 때 해당 요소에 적용시킬 수 있다. 아래는 NavLink를 이용해 메뉴를 클릭하면 글자 색상이 변경되면서 그 색을 유지하도록 만든 것이다. import React from "react"; import { NavLink } from "react-router-dom"; import "../style/Menu.scss"; const Menu = () => { const activeStyle = { colo..

1. 프로젝트 준비하기 1) typeScript 컴파일러 설치 : 브라우저에서는 ts코드를 인식하지 못하므로 ts를 js로 변환하는 컴파일러를 설치해야한다. $ npm install -g typescript -g : golbal 즉 전역으로 설치한다. 2) 버전확인 $ tsc --version 버전 4.9.4로 설치되었다. 3) react+typeScript 프로젝트 생성 $ npx create-react-app todo-ts --template typescript 리액트 프로젝트 설치 프로젝트 명 --타입스크립트 기반의(옵션) -> 타입스크립트를 제공하는 리액트 프로젝트 생성 **에러 npm ERR! 404 Not Found - GET https://registry.npmjs.org/creat-reac..

Hooks란? 리액트 버전 16.8에 새로 도입된 기능으로 클래스형 컴포넌트를 사용하지 않고 함수형 컴포넌트에서 상태 관리(성능 최적화)를 할 수 있다. - 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다 -> 코드 재사용 가능 1. useState : 상태를 관리해야하는 사항이 있을 때 사용 해당 사항의 관리에 대한 변수와 해당 변수의 값을 변경 할 수 있는 함수가 있다 const [state, setState] = useState(0); (괄호 안에는 state의 초기값) * 여러개의 input값을 변경하기 import React, { useState } from "react"; //input의 값들을 state 객체의 키로 만들어서 묶어준다. const Prac = () => { const [st..

1. state란? * state 값을 저장하거나 변경할 수 있는 객체 컴포넌트 내부에서 바뀔 수 있는 값을 의미 주로 버튼 클릭과 같은 이벤트와 함께 사용 ex) 장바구니 수량 추가, 댓글 남기기 등 * props와 차이점 : props는 부모 컨포넌트에서 값을 받아 읽기 전용으로 사용한다. state와 다르게 컴포넌트 내부에서 값을 직접 변경할 수 없다. 2. 함수형 컴포넌트의 useState * 배열 비구조화 할당 : 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법 const array = [1, 2] const [one, two] = array; array에 있는 배열의 값들이 각각 변수 one, two에 저장된다. * useState 함수 const [value, setValue] ..

1. 리액트에서의 이벤트를 사용할때 주의 사항 이벤트이름 = {이벤트값} 1) 이벤트이름은 카멜표기법으로 작성한다. ex) onClick, onChange 등 2) 이벤트의 값으로 함수형태를 전달 (자바스크립트 코드X) 3) 돔 요소에만 이벤트를 설정할 수 있다. - div, button, input, form 등에만 이벤트 설정 가능하고, 직접 만든 컴포넌트에는 불가 2. 이벤트에 매개변수를 전달하기 위해서는 익명함수를 통해서만 매개변수가 전달된다 - function 함수 글자크기변경 - 화살표 함수 {changeFont('10px')} }> 글자크기변경 3. onChange 이벤트 onChange이벤트 : input창에 입력했을 때 콘솔과 브라우저에 입력값(변경된 value) 출력 import Rea..