러닝 리액트12 [Learning React] 8장 - 데이터 포함시키기 8.1 데이터 요청하기 - 요청으로 데이터 보내기 - fetch로 파일 업로드하기 - multipart-formatdata 라는 다른 HTTP 요청을 보내야 함 - 서버에게 request body에 하나 이상의 파일이 들어가 있다고 알려줌 - 권한 요청 - 보통 사용자는 자신을 식별하도록 서비스가 부여한 유일한 토큰을 요청마다 덧붙여서 자신의 신원 표현 - 토큰은 Authorization 헤더에 추가됨 - 데이터를 로컬 스토리지에 저장하기 - window.localStorage - 데이터를 제거하기 전까지 무기한 보관 - window.sessionStorage - 데이터를 사용자 세션에만 저장 - 탭을 닫거나 브라우저를 재시작하면 데이터 사라짐 - 프라미스 상태 처리하기 - 프라미스 3가지 상태 - pe.. 2022. 2. 1. [Learning React] 7장 - 훅스로 컴포넌트 개선하기 7.1 useEffect 소개 - useEffect 훅 - useEffect 훅 안에 넣는 코드는 렌더링 직후에 실행한다는 의미 - Effect: 컴포넌트가 UI 렌더링 외에 수행해야 하는 일 - 렌더링이 이뤄질 때마다 렌더링 된 프롭, 상태, 참조 등의 최종 값에 접근 가능 - 렌더링이 끝난 이후에 발생하는 함수 - 의존 관계 배열 - 리액트는 상태가 바뀌면 컴포넌트 트리를 다시 렌더링함 - useEffect 훅이 쓸데없이 많이 호출되는 문제 발생 가능 - 의존 관계 배열 사용! - useEffect 훅을 구체적인 데이터 변경과 연동 - Effect가 호출되는 시점 제어 - 빈 의존 관계 배열은 초기 렌더링 직후 effect가 단 한 번만 호출됨 (초기화에 아주 유용) - useEffect 훅 안에서 .. 2022. 2. 1. [Learning React] 6장 - 리액트 상태 관리 6.1 별점 컴포넌트 만들기 - react-icons (npm 라이브러리) 6.2 useState 훅 - 훅스에는 컴포넌트 트리와는 별도로 재사용 가능한 코드 로직이 들어있음 - useState 훅: 상태를 리액트 컴포넌트에 추가하고 싶을 때 사용 - React 패키지에 들어있음 - 배열 반환 - 배열의 첫 번째 값은 상태 변수 - 배열의 두 번째 값은 상태 값을 변경할 때 쓸 수 있는 함수 - useState 함수에 전달하는 값은 상태 변수의 default 값 - 훅이 걸린 데이터가 변경되면 데이터에 대한 훅이 걸린 컴포넌트에 새 값을 전달하면서 컴포넌트 re-rendering 일어남 6.3 재사용성을 높이기 위한 리팩터링 - style 프로퍼티; CSS 스타일을 엘리먼트에 추가 가능 - JSX에서 이.. 2022. 2. 1. [Learning React] 5장 - JSX를 사용하는 리액트 5.1 JSX로 리액트 엘리먼트 정의하기 - JSX: JS + XML - JS 코드 안에서 태그 기반의 구문을 써서 리액트 엘리먼트 정의 가능한 JS 확장 문법 - 태그를 사용해 엘리먼트의 타입 지정 - 태그의 속성은 프로퍼티 표현 - 여는 태그와 닫는 태그 사이에 엘리먼트의 자식을 넣음 - 중괄호로 감싼 코드 => JavaScript expression (JSX) - JSX 팁 - 내포된 컴포넌트; 다른 컴포넌트의 자식으로 컴포넌트 추가 가능 - className; JS에서 class가 예약어이므로 className 속성 사용 - 자바스크립트 식; 중괄호로 JS 식 감싸면 중괄호 안의 식을 평가해서 결과값을 사용해야 한다는 의미 - 평가; 중괄호 안에 들어간 JS 코드는 값을 평가받음 - 배열을 JSX.. 2022. 1. 31. 이전 1 2 3 다음 반응형