useEffect라는 Hook을 사용하면 컴포넌트가 마운트 됐을 때(처음 나타남), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 작업을 처리한다. 마운트/언마운트 import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } func..
key의 존재 유무에 따른 업데이트 const array [ 'a', 'b', 'c', 'd'] 위 배열을 다음과 같이 렌더링한다고 가정해보면, array.map(item => {item}) 위 배열의 b와 c 사이에 z를 삽입하게 된다면, 리렌더링을 하게 될 때 b와 c 사이에 새 div 태그를 삽입을 하게 되는 것이 아니다. 기존의 c가 z로 바뀌고, d는 c로 바뀌고 맨 마지막에 d가 새로 삽입된다. (키가 없는 경우) ![img](https://i.imgur.com/3rkaiY1.gif) (키가 있는 경우) ![img](https://i.imgur.com/yEUS6Bx.gif) 배열이 업데이트 될 때 key가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아닌, 수정되지 않는 기존의 값을 그대로 ..
사용 개요 JS를 사용할 때 특정 DOM을 선택해야 하는 상황(getElementById, querySelector)와 같은 DOM Selector 함수를 사용해서 DOM을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 발생한다. 예를 들어, Chart.js, D3.js와 같은 특정 엘리먼트를 접근을 해야하는 경우 등 다양한 상황이 존재한다. 사용법1 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용한다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { c..
쿠키 Set-Cookie: 서버에서 클라이언트로 쿠키 전달(응답) Cookie: 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달 쿠키 로직 웹브라우저에서 로그인 요청을 해서 서버가 받아들이면 Set-Cookie를 통해 웹브라우저 내에 쿠키 저장소에 유저정보를 저장한다. 쿠키는 모든 요청에 쿠키 정보를 자동 포함한다. 쿠키 설명 예) set-cookie: sessionId=abcde1234; expires=Sat, 26-Dec-2020 00:00:00 GMT; path=/; domain=.google.com; Secure 사용처 사용자 로그인 세션 관리 광고 정보 트래킹 쿠키 정보는 항상 서버에 전송 네트워크 트래픽 추가 유발 그래서 최소한의 정보만 사용(세션 id, 인증 토큰) ..
HTTP 헤더 표준(RFC723x) 메시지 본문을 통해 표현 데이터 전달 메시지 본문 = 페이로드 표현 = 표현 헤더 + 표현 데이터 표현은 요청이나 응답에서 전달할 실제 데이터 표현 헤더는 표현 데이터를 해석할 수 있는 정보 제공 데이터 유형, 데이터 길이, 압축 정보 등등 참고 : 표현 헤더는 표현 메타데이터와 페이로드 메시지를 구분해야 하지만 여기선 생략! 표현 Content-Type : 표현 데이터의 형식 Content-Encoding : 표현 데이터의 압축 방식 데이터를 읽는 쪽에서 인코딩 헤더의 정보로 압축 해제 Content-Language : 표현 데이터의 자연 언어 Content-Length : 표현 데이터의 길이 (페이로드 헤더) 표현 헤더는 전송, 응답 둘다 사용 협상(콘텐츠 네고시에..
3xx(Redirection) 클라이언트가 서버에게 요청을 하는데 서버가 클라이언트에게 추가 조치를 필요하다고 재요청 리다이렉션 Old Location->New Location을 서버가 응답 클라이언트는 자동 리다이렉트를 통해 새로운 페이지를 다시 요청함 서버가 새로운 Location 응답 리다이렉션 이해 영구 리다이렉션 특정 리소스의 URI가 영구적으로 이동 일시 리다이렉션 일시적인 변경 주문 완료 후 주문 내역 화면으로 이동 PRG : Post/Redirect/Get 특수 리다이렉션 결과 대신 캐시를 사용 영구 리다이렉션 301, 308 리소스의 URI가 영구적으로 이동 원래의 URL를 사용X, 검색 엔진 등에서도 변경 인지 대부분 301의 로직을 따르며 GET으로 변경되어질 수 있고 본문이 제거될 ..
HTTP 메서드 활용 클라이언트에서 서버로 데이터 전송 데이터 전달 방식 쿼리 파라미터를 통한 데이터 전송 GET 정렬 / 필터 메시지 바디를 통한 데이터 전송 POST, PATCH, DELETE 리소스 등록, 변경 등 클라이언트에서 서버로 데이터 전송하는 4가지 상황 정적 데이터 조회 이미지, 텍스트 문서 동적 데이터 조회 정렬, 필터 HTML form HTTP API Server to Server 앱 클라이언트 아이폰, 안드로이드 웹 클라이언트 Ajax HTTP API 설계 설계 방법 문서 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row) HTTP API - 컬렉션 POST 기반 등록 서버가 관리하는 리소스 디렉토리 서버에서 새로 등록된 리소스 Location URI를 만듦 예) 회원 관리..
- Total
- Today
- Yesterday
- https://jwprogramming.tistory.com/52
- https://wikidocs.net/68
- Co
- ㄴ
- https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD
- https://react.vlpt.us/basic/11-render-array.html
- https://subicura.com/2017/01/19/docker-guide-for-beginners-1.html
- https://react.vlpt.us/
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |