공부기록용

State State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미하는 것으로 별도로 상태를 관리하는 것이다. UI를 바꾸기 위해서 사용하는 것이다.(렌더링을 다시하기 위함으로 변경되야 하는 값들을 위해 사용하면 된다.) State 만들기 State를 만들 때는 useState()를 사용한다. useState 는 state를 만들어주는 리액트에서 제공하는 기능입니다. 그래서 리액트에만 존재하는 개념이자 기능입니다. 그리고 앞으로 우리는 이것을 “기능” 이라고 하지 않고 “훅” 이라고 표현하겠습니다. useState 훅을 사용하는 방식 const [ value, setValue ] = useState( 초기값 ) 먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 sta..

🖇️서버가 클라이언트 인증을 확인하는 방식 🔴JWT란, 🔴JWT구조 🔴JWT의 방식 🔻특징 🔻한계 🔴JWT의 Access Token / Refresh Token 🔴서버 세션 인증 방식과 JWT인증의 차이 기존 쿠키 세션 동작 방식과 문제점 저장 공간의 용량 세션은 서버의 메모리 내부에 저장이 된다. 유저가 한두명일때야 메모리에 무리가 가지 않겠지만 유저가 수천명인 대형 서비스에서는 세션의 양이 많아지는 만큼 메모리에 부하가 걸릴 수 있다. 확장성의 문제 서비스의 규모가 커져서 서버를 여러대로 확장 및 분산해야 한다면 세션을 분산시키는 기술을 따로 설계해야 한다. 이를 해결하기 위해 보통 JWT라는 로그인 방식을 도입 JWT JWT(Json Web Token)는 말그대로 웹에서 사용되는 JSON 형식의 토..

보통 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있다. Cookie 인증 쿠키는 Key-Value 형식의 문자열 덩어리이다. 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 정보 파일이다. 각 사용자마다의 브라우저에 정보를 저장하니 고유 정보 식별이 가능한 것이다. Cookie 인증 방식 브라우저(클라이언트)가 서버에 요청(접속)을 보낸다. 서버는 클라이언트의 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 Set-Cookie에 담는다. 이후 해당 클라이언트는 요청을 보낼 때마다, 매번 저장된 쿠키를 요청 헤더의 Cookie에 담아 보낸다.서버는 쿠키..

구조분해 할당과 Props 구조 분해 할당 통해 props 내부값 추출하기 1. 구조분해할당 해보기 // src/App.js import React from "react"; function App() { // 객체 존재 const testObj = { name: "mini", age: 28, company: "sparta" } // 새로운 변수 할당 const { name, age, company } = testObj; // 해당 key의 이름을 가진 value들을 뽑아옴 // value들이 출력됨 console.log(name); // mini console.log(age); // 28 console.log(company); // sparta return App } export default App; ..

// src/App.js import React from "react"; function User(props) { console.log(props) return {props.name}; } function App() { const name = "상위컴포넌트이름" return ; } export default App; Props Children 이렇게 props를 보내던 방식과는 조금 다르다 정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있다. // src/App.js import React from "react"; function User(props) { console.log('props', props); return {props.children}; // 2.reac..

props 컴포넌트간의 정보교환/교류 방식, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. Mother컴포넌트에서 Son컴포넌트로 name = '흥부인' 이라는 정보를 전달했다 import React from 'react'; // 자식 function Son() { return 나는 아들입니다.; } // 엄마 // Mother -> Son 으로 정보를 전달했다. function Mother() { const name = "흥부인"; return ; // Mother컴포넌트에서 Son컴포넌트로 다음과 같은 정보를 내려줬다_props } ..