본문 바로가기
history 인터페이스 목차 history란? history 객체의 속성(length, state) history 객체의 메서드(back, forward, go, pushState, replaceState) 1. history란? 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법 제공하는 DOM 2. 속성 2-1. History.length 읽기 전용 속성 현재 페이지를 포함한 세션 기록의 길이를 나타내는 정수 반환 가령, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 1 history.length 2-2. History.state 기록 스택 최상단의(현 history에 위치하는) state를 나타내는 값 반환 pushState() 또는 replaceState()를 사용할 .. 2022. 5. 2.
hook이론1. State Hook 목차 useState()메서드 호출의 의미 문법 초기 렌더링 시의 state 1. useState() 메서드 호출의 의미? state 변수의 선언 클래스 컴포넌트에서의 this.state 기능과 동일 state 변수는 react에 의해 해당 컴포넌트 뿐만이 아닌 전역으로 사용 가능 2. 문법 인자값은 state의 초기값 만약, n개의 다른 변수를 저장하기를 원한다면 useState() 메서드를 n번 호출해야 함 state 변수와 state 변수를 업데이트 할 수 있는 함수를 반환 const [state, setState] = useState(initialState); 최초 렌더링을 하는 동안 반환된 state는 첫번째 전달된 인자인 initialState 값과 동일하다. 이후 setState함수를 호출하.. 2022. 4. 29.
시퀄라이즈1. 환경셋팅 목차 sequelize와 sequelize-cli 설치 init 1. 설치 1.-1 커맨드 라인 입력하여 sequelize와 mysql2 설치 $ npm install sequelize mysql2 1-2. cli로 sequelize를 조작할 수 있는 sequelize-cli를 전역으로 설치 npm install -g sequelize-cli 2. sequelize init 2-1. init 커맨드 입력 sequelize를 사용할 디렉토리로 이동한 후 터미널에 init 입력 $ sequelize init 커맨드 입력 후 init 완료 시 아래와 같이 config, models, migrations, seeders라는 디렉토리가 자동으로 생성 config 디렉토리 내에는 config.json이라는 파일이 .. 2022. 4. 29.
10. 전역(global) 데이터 공유 목차 context란? context객체 생성 클래스 컴포넌트에서의 Context 구독 함수 컴포넌트에서의 Context 구독 1. Context란? React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법 즉, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 여러 컴포넌트에서 값 공유 가능 Context가 쓰이는 상황 예시: 로그인한 유저 확인, 선호하는 언어 선택, 테마 선택 등 2. Context 객체 생성; React.createContext()메서드 Context 객체를 참조하고 있는 컴포넌트를 렌더링할 때 React는 트리의 상위에서 가장 가까이 있는 Provider로부터 현재값을 참조함 defaultValue 매개변수는 트리ㅍ 안에서.. 2022. 4. 29.
8. 조건부 렌더링 목차 논리 연산자 && 사용 삼항연산자 사용 조건식 작성 1. 한가지 조건만을 사용한 표현식 : 논리 연산자 && 사용 조건이 true일 경우 && 뒤의 expression이 출력 조건이 false일 경우 React는 && 뒤에 표현식을 무시하고 건너뜀 조건이 falsy일 경우, && 뒤에 있는 표현식을 건너뛰지만 falsy 표현식이 return 됨 1-1. 문법 condition && expression 2. 두가지 조건을 사용한 표현식 : 삼항연산자 사용 특수문자를 기준으로 끊어서 해석 가능 condition이 true이면(?) true를 return하고 아니면(:) false를 return 2-1. 문법 condition ? true : false 2022. 4. 28.
7. 이벤트 다루기 목차 React 엘리먼트에서의 이벤트 처리방식 JSX 콜백에서의 this bind() 호출없이 binding 방법 합성이벤트 속성 자주 쓰이는 합성 이벤트 1. React 엘리먼트에서의 이벤트 처리 방식 camelCase 사용 JSX 사용하여 함수로 이벤트 핸들러 전달 html의 form 엘리먼트의 retrun 속성이 false라 할지라도 기본 동작 방지 불가능 (= e.preventDefault() 메서드 반드시 호출해야 함) W3C 명세에 따른 합성 이벤트 정의하므로 브라우저 호환성 문제 없으나, 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않음 DOM 엘리먼트 생성 후, 이벤트 리스너를 추가하기 위해 addEventListener() 메서드 호출할 필요 없음 일반적으로, ES6 클래스 사용하여.. 2022. 4. 28.
hook이론4. useReducer 목차 useReducer() useReducer 사용하여 state 변경 state 초기화(명시, 지연) 1. useReducer() 메서드란? useState()의 대체 메서드 state의 하위값이 다수 존재하는 등의 복잡한 정적 로직 만드는 경우 또는 새로운 state가 이전의 state에 의존적인 경우 useReducer 사용 상태를 바꾸는 코드를 한 공간에 밀어넣기 위해서 Reducer를 씀 (=즉, useReducer() 메서드는 상태를 만들고 상태를 변경할 수 있는 메서드임) 2. useReducer 사용하여 상태 변경 2-1. 가져오기 import React,{useReducer} from 'react' 2-2 hook 호출 const [state, dispatch] = useReducer(.. 2022. 4. 28.
hook1. 기본 목차 hook의 도입 이유 hook이란? lint 규칙이란? hook을 사용하기 위한 환경 생명주기 메서드에 대한 hook의 처리 hook의 한계 1. hook을 도입하게 된 이유? 타언어와는 다른 JS에서의 this 키워드 작동 방식 > class 사용의 어려움 class 컴포넌트의 state 없이도 state 관련 로직 재사용 가능 컴포넌트를 생명주기 메서드 별로 쪼개는 것이 아닌, 연관된 기능에 기반한 더 작은 함수로 쪼갤 수 있음 즉 정리하자면, 함수형 컴포넌트에서 class 컴포넌트의 state 개념과 생명주기 method() 개념에 대응되는 기능들을 사용하기 위해서 hook을 도입하게 됨 2. hook이란? 함수형 컴포넌트에서도 state와 생명주기 개념을 사용할 수 있게 하는 함수 모음(인구.. 2022. 4. 26.
로그인/폼체크2 - 유효성 검사 목차 validate 함수 선언 validate 함수 호출 유효성 검사 조건식 작성 함수의 return값으로 state 업데이트 동작 확인 누적 작성 코드 유효성 검사는 종종 쓰이기 때문에 따로 함수로 빼보자! 1. validate이란 이름의 함수를 선언 const validate = (input) => { } 2. form 제출 시 실행되도록 하기 위해 handleSubmit 함수에서 호출 Form 컴포넌트의 handleSubmit 함수에서 변수 input 선언 후, 사용자가 input 박스에 입력한 value값을 받아와서 속성으로 담는다. 그 다음 validate 함수를 호출하여 인자값으로 input 객체를 넣는다. const input = { userid: id.value, password: pw... 2022. 4. 26.

티스토리툴바