hoilzz/TIL
  • README
  • make-module
    • deploy
      • deploy-npm-pkg
        • lerna
        • npm-publish
          • 1-package
          • FAQ
        • babel-in-monorepo
        • rollup-faq
    • lerna
      • lerna
      • lernaFAQ
    • es6 module에서 import export는 정확히 어떻게 동작하는걸까?
    • babel
      • babel
      • babel
      • tour 서비스에서 폴리필 관련 이슈.
    • webpack and rollup
    • package-lock.json
    • rollup
      • rollup
  • old
    • Algorithm
      • 이론
        • README
          • heap
          • tree
            • 최소스패닝트리
            • std-map
            • tree
            • binary-tree
          • queue
            • queue
          • linked-list
          • vector
          • graph
            • DFS
            • BFS
            • graph
            • spanning-tree
            • Dijkstra
            • bellman-ford
            • dijkstra-1504
          • List
          • linear-not-linear
          • priority_queue
          • stack
            • stack2개로-queue만들기
            • Stack
          • disjoint-set
          • hash table
        • algorithm
          • Sorting
            • 삽입 정렬
            • 선택 정렬
            • quick_sort
            • bubbleSort
            • merge_sort
          • greedy
          • kmp-algorithm
          • 다익스트라
          • bellman-ford
          • binary_search
        • math
          • 진법
          • 소수
          • 최대 최소 공약수
          • 소인수 분해
        • string
          • 알파벳 개수
          • JS-8-prototype
      • 수업
        • codeplus
          • basic
            • graph
            • brute-force
            • 플러드 필
            • 5. DP
            • 탐색
          • ch3-1-완전탐색-그냥다해보기
          • ch3-2-완전탐색-큐
          • ch2-2-완전탐색-순열
          • DP
          • ch3-3-완전탐색-재귀호출-비트마스크
          • ch2-1-완전탐색-비트마스크
        • 인프런
          • 1-순환
            • 5. Counting Cells in a Blob
            • powerset(멱집합)
            • 2. 순환적으로 사고하기
            • Recursion 응용 - 미로찾기
            • 1. 순환
            • 1. 순환의 개념과 기본 예제 1
            • 1-혼자풀어본거
            • 3. 순환 알고리즘의 설계
            • 6. recursion 응용
          • 2-DP
            • 가장 긴 공통 부분 문자열 Longest Common Subsequence(LCS)
            • matrix-chain Multiplication
            • 2-3
            • 2-2
            • 2-1
            • 2-Summary
      • 문제풀기
        • old
          • bruteforce
            • ❌1339-단어수학
            • ❌10972-다음순열
            • ❌6603-로또
            • ❌2529-부등호
            • 🔨6679-싱기한-네자리숫자
            • 1748-수 이어쓰기
            • ❌1722-순열의순서
          • README
            • 2193-이친수
            • 1003-피보나치 개수
            • 2579-계단오르기
            • 9461_파도반수열
            • 11053_theLongestIncreasingSequence
            • 2193_이친수
            • 1912-연속합
            • 1699_제곱수의 합
            • 11052-붕어빵
            • 가장_긴_팰린드롬
            • DP복습하기
            • 2579_계단오르기
            • 1149-rgb거리
            • 1463-1로만들기
          • stack
            • 2493-탑
            • 10799-쇠막대기
            • ❌2504-괄호의값
            • 9012-괄호
          • README
            • 1074-Z
            • 1992_쿼드트리
          • 재귀호출-완전탐색
            • ch6.7-최적화
            • ch6.3-보글게임
            • boj-2309
            • ch6~6.5
            • ch6.4-소풍
            • ch6~6.5-문제풀이
            • ch6.1-재귀호출
            • ch6.2-n개의 숫자에서 r개 고르기
          • dfs,bfs
            • ❌숨바꼭질
          • ch5-1
          • ch4-시간복잡도
          • ch1-2
          • ch5
          • BFS, DFS
            • ❌13913-숨바꼭질4
        • new
          • 2-1
            • leet-129-sum-root-to-leaf-numbers
            • 200. number of island
          • 1-4
            • 0125
              • 14500-테트로미노
              • 9095-123더하기
              • 1065-한수
              • 6603-로또
            • 0122
              • 9095-123더하기
              • 2309-일곱난쟁이
            • summary
            • 0121
              • 1759-암호만들기
          • 2-3
            • perfect squares
            • sw-expert-자석
            • 포도주
            • 2667 단지 번호 붙이기
            • 2156 포도주 시식
          • 3-1
            • leet-338-counting-bits
            • leet-139-word-break
          • 3-4
            • 14891
          • 2-2
            • X-leet-394-decode-string
            • 로봇 청소기
            • X-337-house-robber-3
            • 8911 거북이
          • 2-4
            • 쉬운 계단 수
            • 103-Binary Tree Zigzag Level Order Traversal
          • 서비스명-문제번호-문제명
          • 4-3
            • 서비스명-문제번호-문제명
          • 1-5
            • 0130
              • 1012-유기농배추
          • 4-2
            • leet-860-lemonade-change
    • cs
      • network
        • about http
          • README
            • ch4
            • ch3
          • http떠도는 글 정리
            • http1.x의 커넥션 관리
        • 네쉽
          • 4-인터넷계층과 IP
          • 4-3-dhcp
          • faq
          • 4-2-routing
          • 3-transport
          • 6-보안
          • 각-계층-비교요약
        • home server
          • port
          • nat
          • DHCP
          • router
          • ip
          • dynamic-ip-addr
        • 0000
        • CDN
      • database
        • architecture
          • 2-normalization-basic
          • 1-normalization-원자적-데이터
          • 4-table-relation
          • 3-foreign-key
        • fundamental
          • fundamental
      • os
        • faq
        • 7-메모리관리
        • 3-computer-system-동작-원리
        • 5-process-관리
        • 6-CPU-스케줄러
        • 8-가상메모리
        • 4-인터럽트-원리
        • 2-overview
  • React
    • hooks
      • hooks state
      • useEffect vs useLayoutEffect
      • Hook 규칙
      • From Classes to Hooks
      • complete-guide-useEffect
        • useEffect 완벽가이드 3
        • useEffect-완벽가이드-5-2
        • useEffect 완벽가이드
      • useReducer로 useState 구현하는 방법
      • useRef는 hook의 디펜던시로 사용하면 안된다.
      • hooks
      • index를 통해 관리하고 있다. 그래서 조건문이나 loop문 등에 포함되면 순서가 보장되지 않기 떄문에이 작동하는 방식 hook 관련 린트에러가 발생한다.
    • test
      • FE 테스트
      • test-hae-boza zebal
      • 5 Questions Every Unit Test Must Answer
      • Test zebal hae-bo-za
      • Unit Test assertion 다시 생각하기
      • 테스트해보자(2)
    • tips
      • 합성 컴포넌트 with hooks
      • Why do We Write super(props) 요약해보자.
      • 상태 끌어올리기
      • 리덕스 셀렉터 구조화하기
      • when to break up a component into multiple components
      • 리렌더링 퍼포먼스 이슈
      • prop drilling
      • normalize API 매번 볼때마다 헷갈려
    • prop과 state는 왜 immutable일까?
    • bugReport
      • support option to stop propagation of events in render tree
    • virtual DOM
      • Virtual DOM과 DOM의 차이
      • What is Virtual DOM?
    • lib
      • typesafe actions
    • lifeCycle
      • LifeCycle Overview
    • react in runtime
    • handleError
      • Error Boundaries
    • setState 호출은 언제, 그리고 왜 일괄 처리 되는가?
    • reactElement
      • JSX
      • React component, React element, and Instance
    • React.ref
    • 함수형 setState
  • FrontEnd
    • js
      • application-with-js
        • ch4-2-add-context
        • ch3-model
        • ch4-controller
        • ch2-event
        • ch3-5-when-data-loading
        • 5-3-binding
        • ch1-mvc-and-class
      • functional
        • FP-3-map-filter
        • JS-10-객체-ES6
        • FP-4-each
        • 커링
        • JS-9-this
        • FP-2
        • FP-1
        • FP-7-객체
        • JS-8-prototype
        • 다형성
      • es6+
        • [es6]var, let, const
        • promise
        • async-await
        • [es6] arrow func
        • iterator-generator-iterable
      • basic
        • function
        • Location Object
        • global_object_window
        • Concurrency_model_and_event_loop
        • delete-operator
        • Summary
        • 메모리 관리 + 4가지 흔란 메모리 누수 대처법
        • throw-try-catch
        • throw-vs-console-error
        • closure
        • lexical_scope
        • scope chain
        • Hoisting
        • this
        • execution context and scope
        • variable
        • OOP
      • mdn_translation
        • apply()
        • proxy
        • ObjectAssign()
        • comparison
        • setInterval
        • with
        • setTimeout
        • map
        • this
        • bind
        • getting_started_ajax
        • reduceRight
      • test
        • redux unit test
        • Static VS Unit VS Integration Testing for Frontend Apps
        • Why you've been bad about testing
        • 2-use-jest-dom
      • asyncronous
        • 비동기
        • 비동기성
    • ts
      • 타입가드와 차별된 타입
      • Node vs Element
      • typescript debugging 익숙해지기
      • 인덱스타입
      • Typescript 전환 후기
      • UnionType
      • Conditional Types
      • tsconfig
      • TypeScript tips
      • 문자열 시그니처
      • *.d.ts
      • module_resolution
      • Typescript 전환기
    • technique
      • debounce
      • immutable
    • react
      • react다시공부하기
        • Components-and-Props
        • README
          • 11-👍normalizing-state-shape
          • 8-withrouter
          • 20-refactoring-reducers
          • 12-wrapping-dispatch-to-log-action
          • 04-refactoring-entry-point
          • 18-applying-redux-middleware
          • 05-adding-react-router
          • 14-fetching-data-on-route-change
          • 19-👍updating-state-with-fetched-data
          • 6-navigating-with-react-router
          • 16-wrapping-dispatch-to-recognize-promise
          • 10-colocating-selectors-with-reducers
          • 7-filtering-redux-state-with-router-params
          • 17-middleware-chain
          • 15-dispatching-actions-with-fetched-data
          • 02-supplying-the-initial-state
        • Composition VS Inheritance
        • rendering-element
        • uncontrolled-component
        • 성능-최적화
        • UNSAFE-componentWillReceiveProps
        • state-and-lifecycle
        • Thinking-in-react
        • props-state
        • ref
        • v16
          • Portals
        • lifting-state-up
        • context
        • setState-Updater-Factory
        • HOC
          • HOC
      • library
        • redux-thunk
        • redux-saga
          • example
          • 14-cancel-task
          • 15-fork-model
          • cheatSheet
          • 12-yield를-이용한-사가-배열
          • 1-readme
          • 9-non-blocking
          • 13-사가-조합
          • 11-race-multiple-effect
          • 3-helper-function
          • 7-event-abstraction
          • 6-error-handling
          • 5-action-dispatch
          • summary-and-faq
          • 10-병렬태스크-실행
          • 8-action-poooling
          • channel
          • 4-서술적-effect
          • 2-tutorial
        • reselect
      • 번역
        • 공홈
          • usage-with-react
          • Introuducing Hooks
          • Reconcilation
          • Hooks at a Glance
          • using-immutable-data
          • setState(Component API)
          • getting_started
        • React Element
        • Autobinding
        • React Components
        • render
        • context API 효과적으로 사용하기
        • 리액트로 앱 상태 관리 하기
      • redux-faq
        • Organizing State
        • reducer-action-where-should-logic
        • Changes are made with pure function
        • Where should websockets and other persistent connection live?
        • action-creator에서-여러개-dispatch-해야할까
      • tip
        • parameterized-event-handler
        • idiomatic-redux
        • 5tips-redux-in-large-application
        • five-tips-for-redux-in-large-application
      • redux다시공부하기
        • redux-doc
          • 3-7-정규화된-데이터-업데이트
          • 3-5-deep-combineReducer
          • 3-4-combineReducer
          • 3-1-기본-리듀서-구조
          • 2-1-1-advance-action
          • 3-2-리듀서-로직-분리하기
          • api-applyMiddleware
          • 3-3-리듀서-리팩토링하기
          • 상태 정규화
        • 5 tips for working with redux in large application
        • selector
        • core-concepts
        • redux
      • react-redux
        • Store에 접근하기
      • pattern
        • render-prop
      • Why react?
    • markup-css
      • css
        • markup_level_test
        • What_is_float
        • background-size
        • selector
        • html_semantic_elements
        • before_pseudo_element
        • README-dot-md
        • percentage
        • css_box_model
        • 2017-1-20-vertical-align
        • 2017-2-22-z-index
        • transition
        • units_for_expression_len
        • box_sizing
        • css의 7가지 단위
        • inlineAndblock
        • alignCenterViaCss
        • 2017-2-1-margin
        • webkit이란
        • media_query
        • transform
        • Position
        • viewport
      • html
        • HTML5_Stylde_Guide
        • imagesWithMarkup
        • form
        • img
        • data-attributes
        • viewport_meta_tag
        • flex
    • webpack
      • 공홈번역
        • Module
        • module-resolution
        • loader
        • Caching
        • manifest
    • browser
      • 브라우저 렌더링
      • Scroll Event with throttling using raf
      • 쿠키, 세션, 캐시
      • raf
      • cors
      • window.history
      • 쿠키와 인증
    • tests
      • static vs unit vs integration test
      • getting started
    • codespitz-deisgn
      • 1
    • test
      • JS test란
      • redux test
  • devlog
    • 0619
      • Null and Undefined
      • babel-preset-env
      • babel 7.4.0
      • babel-lodaer
      • core-js
      • @babel/runtime
      • babel/polyfill
      • @babel/plugin-transform-runtime
      • babel-faq
      • scroll
    • 0802
      • const는 상수인데, 왜 값이 바뀔 수 있을까?
    • 0822
      • react in runtime
    • 2020
      • 0220
        • union type 탈출하기
        • 동적 text area
      • 0213
        • rel noopener
        • sticky
        • push
        • unknwon
      • 0217
        • portal로-리렌더-줄이면서-느낀거
        • table
        • css width만 가지고 height값과 함꼐 비율대로 늘리기
    • 0730
      • shallow rendering 사용하지 않는 이유
    • 1023
      • DOMContentLoaded, load, unload
    • 0520
      • input with TS
    • 0704
      • as const와 generic으로 타입 추론 하기
      • TS에서 extends
      • saga with pattern
    • 0608
      • State
      • setState-vs-useState
      • React Component가 뭐에요?
      • JSX
      • png, gif, jpg, svg
    • 0524
      • pure component and memo
    • 0521
      • 0521
    • 0523
      • useState vs useReducer
      • temp
    • 0823
      • 어드민 개발하면서 flex 써먹은거 정리
    • 1011
      • js로 2차원 배열 만들기
    • 0522
      • 리마운트를 막아보자!
    • 0829
      • saga에서 모든걸 관리하면 편한데
    • 0516
      • 제너레이터 함수 - Caller와 Callee
      • Saga
    • 0703
      • React Context 효과적으로 사용하기
    • 0905
      • 제곧내
    • 0809
      • intersection observer
    • 0604
      • useRef
    • 0727
      • React - 기본 이론
    • 0616
      • immutablility
    • 0712
      • infer
    • 0705
      • useselector-reselect
    • 0612
      • 오버로딩 vs 오버라이딩
    • 0527
      • super(props) 왜 작성해야 할까?
    • 0613
      • React component, React element, and Instance
      • ios-scroll
    • 0627
      • back button
      • typescript-config
    • 0925
      • 인덱스 시그니처의 key의 특정 스트링만 정하기
    • 0923
      • useRef
    • 0530
      • lib.d.ts
      • Modules
      • Declaration file
    • 0803
      • arrow function in class
    • 0729
      • testing redux
    • 0628
      • Composition on PureComponent
    • 0805
      • IO entry 정보
    • 0529
      • input
    • 1007
      • 인덱스 시그니처의 키값을 제네릭으로 할당하기
    • 0806
      • getBoundingClientRect
    • 0807
      • Imperative vs Declarative API
    • 0620
      • asset management
    • 0927
      • 어떤 상태에 대해 redux state에 둘지 component state로 둘지의 기준은?
  • javascript
    • generator
      • Iteration protocols
    • Curry or Partial Application
    • basic
      • 실행 컨텍스트
      • 프로토타입
      • 함수 표현식과 함수 선언식의 차이
      • OOP 간단 정리
    • closure 알아보기
    • What is a Pure function?
    • arrow-fn-vs-fn
    • hoisting with let-const
    • ES6 In Depth
    • Aync Await blows promise away
  • Web
    • video
      • HLS
      • MediaSource
      • video, track, source
      • HLS
    • intersection-observer
      • intersection observer
    • optimizeRender
      • layout과 reflow를 발생시키는거
  • book-review
    • ruby-object-oriented-design
      • 5
      • ch2-단일-책임-원칙을-따르는-클래스-디자인
      • ch3-의존성-관리하기
      • ch5-오리타입으로-비용줄이기
      • ch4-3-유연한-인터페이스-만들기
      • ch4-2-유연한-인터페이스-만들기
      • ch4-1-유연한-인터페이스-만들기
      • ch-3-의존성-관리하기
    • 읽기좋은코드가
      • 1. 코드는 이해하기 쉬워야 한다.
      • 2. 이름에 정보 담기
      • 3. 오해할 수 없는 이름들
    • core-javascript
      • 1. 데이터 타입
  • redux
    • saga
      • 리덕스 사가 패턴이 정신건강에 도움을 줄 것이다.
      • 사가로 비동기 동작 제어하기
      • 사가 패턴
    • reducer
      • slice reducer 간 데이터 공유하기
      • prerequisite concept
      • Managing Normalized Data
      • split reducer or not
    • selector
      • useSelector-with-reselect
      • 셀렉터 패턴
    • reselect
  • FP
    • 순수 함수
  • developer
  • retrospect
    • 어드민 개편
    • UI는 이따가 생각하자
  • DesignPattern
    • 추상화
Powered by GitBook
On this page

Was this helpful?

  1. FrontEnd
  2. react
  3. 번역

context API 효과적으로 사용하기

local State와 React Context는 리액트 앱에서 상태를 관리하도록 도와준다. 몇가지 문제를 피하고 개발자 경험 및 context object의 유지보수성 개선할 수 있다.

>

PreviousrenderNext리액트로 앱 상태 관리 하기

Last updated 5 years ago

Was this helpful?