본문 바로가기
React 환경셋팅 4. Redux 1. 설치 커맨드 $ npm install redux react-redux 2. dev툴로 확인하기 위한 커맨드 $ npm install redux-devtools-extension 2022. 5. 2.
React 환경셋팅 2. React_router_DOM 목차 React_router_DOM이란? 라이브러리의 적용 범위 현재 기준 최신버전 설치 커맨드 불러오기 1. React_router_DOM이란? 웹 어플리케이션에서 클라이언트와 서버측 라우팅하는 리액트 라이브러리 UI를 구축하는 JS 라이브러리 2. 라이브러리 적용 범위 Routes 설정 LInk를 통한 경로 이동 레이아웃을 위한 라우터 분할 서버 렌더링 등.. 3. 최신 버전 설치(v6 -2021-12-17) $ npm install react-router-dom 4. 불러오기 BrowserRouter: 최상위 컴포넌트 link: a 태그 대신 써야하는 컴포넌트 Routes: 컴포넌트를 보여주게 함 Route: URI에 맞는 컴포넌트를 찾아주는 컴포넌트 import { BrowserRouter as .. 2022. 5. 2.
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.

티스토리툴바