0. State (1) Local State (지역상태) : 컴포넌트에서 useState를 이용해서 생성된 state (2) Global State (전역상태) : 중앙 state 관리소 (props로 전달하지 않아도 사용 가능함) 1. 리덕스란? - "중앙 state 관리소"를 접근&제어 가능한 패키지(라이브러리) => yarn | npm으로 설치해야함 - 전역상태를 관리한다 2. 리덕스 설정 (1) 터미널에서 패키지 설치 : yarn add redux & yarn add react-redux 2개 설치 => yarn add redux react-redux (2) src 폴더 아래 redux 폴더 생성 (3) redux 폴더 안에 config 폴더 / modules 폴더 생성 (redux 폴더 : 리덕..

provider (내 코드에서는 ) 가 제공한 value값이 달라지면 useContext 사용하는 모든 컴포넌트가 리렌더링됨! => 이것의 대안 : 메모이제이션 ▼ 아래 포스팅이 context API 내용 ▼ 리액트 : Context API (전역에서 데이터 사용) * props : 부모 > 자식 > 그 자식 > 그 자식의 자식 .... * props drilling 발생 : 이 props가 어떤 컴포넌트로부터 왔는지 파악하기 어려움 + 유지보수 어려움 * useContext : 전역에서 데이터 관리 가능 (1) Context zerotonine2da.tistory.com [리-렌더링의 발생 조건] 컴포넌트에서 state 변경시 컴포넌트가 내려받은 props가 변경시 부모 컴포넌트가 리-렌더링 되면 자식..

* props : 부모 > 자식 > 그 자식 > 그 자식의 자식 .... * props drilling 발생 : 이 props가 어떤 컴포넌트로부터 왔는지 파악하기 어려움 + 유지보수 어려움 * useContext : 전역에서 데이터 관리 가능 (1) Context API 필수 개념 3가지 createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달 (to 하위 컴포넌트) (2) 주의 사항 : 렌더링 문제 provider (내 코드에서는 ) 가 제공한 value값이 달라지면 useContext 사용하는 모든 컴포넌트가 리렌더링됨! => 이것의 대안 : 메모이제이션 (3) 코드로 구현 src 폴더 안에 context 폴더 생성 > js..

1. JSX란 무엇인가요? [생각] 자바스크립트 + XML을 더한 확장한 문법 [정답] + JS모든 기능이 포함되어 있고 react element를 생성하기 위한 문법 2. SPA와 MPA의 개념 및 각각의 특징 [생각] : SPA 는 단일페이지 ( 바꾸고 싶은 데이터만 가져다가 변경하기에, 깜빡임이 없음) 단점으로는 SEO 검색엔진최적화가 약하다 :MPA는 여러페이지로 구성되어 있어서 전체 리랜딩해서 깜빡임 (잘 사용하지 않음) [정답] + SPA는 단 하나의 페이지만 로딩 (서버에 index.html / index.js만 요청 & state 변경시에 필요 부분만 요청해서 동적 업데이트) + 속도: SPA 는 초기 로딩속도가 가져와야하는 리소스양이 많아서 MPA 에 비해 오래걸림 + 리액트.뷰 -> 라..

import React, { useState } from 'react'; import Comments from './Comments'; import styled from 'styled-components'; const StBtn = styled.button` background-color: ${(props) => props.color}; color: white; border-radius: 20px; border: none; padding: 10px 20px; margin: 10px; font-weight: 600; `; function CommentsLayout({ comments, setComments, member }) { const memberList = ['하니', '혜인', '다니엘', '해린'..

[문제] Home.jsx에 있는 데이터를 Details.jsx에서도 사용하고 싶은데 데이터를 어떻게 가져와야할 지 모르겠음. import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from '../pages/Home'; import Details from '../pages/Details'; const Router = () => { return ( ); }; export default Router; [해결] Router에서 Home.jsx에서 사용하는 useState를 Router에서 사용하고 각각 props로 전달하기. import { BrowserRouter, Route, Routes } from 'react-router..