Skip to content

Commit fd1bd01

Browse files
oding01oding01
committed
feat: 오타 수정
1 parent 1d3c243 commit fd1bd01

17 files changed

Lines changed: 107 additions & 58 deletions

File tree

‎_posts/2025-01-14-how-to-use-usecontext.md‎

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ Context가 뭔데? 라고 하신다면 전역 데이터를 담고 있는 하나
100100
```jsx
101101
import { createContext } from "react";
102102

103-
const context = useContext()
103+
const context = createContext()
104104
```
105105
<br/>
106106

@@ -121,7 +121,7 @@ Initial Value에서 `value` 속성값을 지정하지 않을 경우, Context를
121121
{% raw %}
122122
import { createContext } from "react";
123123

124-
const Context = useContext()
124+
const Context = createContext()
125125

126126
function Example() {
127127
const [title, setTitle] = useState('useContext')
@@ -142,6 +142,47 @@ function Example() {
142142
{% endraw %}
143143
```
144144
value로는 넘겨줄 값을 넣으면 됩니다.
145+
#### ⚠️ 주의
146+
여기서 주의할 점은 Context로 관리할 <span style='color: indianred'>**상태를 최상단 부모 컴포넌트에 위치시키면 안 된다**</span>는 점입니다.
147+
148+
최상위 부모 컴포넌트에 상태를 위치시키면 Context API를 사용하는 의미가 없어집니다. 최상단에 위치해있기 때문에 상태가 변하면 자식들의 리렌더링이 발생할 수 밖에 없기 때문이에요.
149+
150+
그래서 보통은 Provider 컴포넌트를 하나 만들어서, 무조건 Provider 컴포넌트 안에 관리할 상태를 넣어 리렌더링 발생을 막습니다.
151+
152+
```jsx
153+
{% raw %}
154+
import { createContext } from "react";
155+
156+
const Context = createContext()
157+
158+
function ContextProvider({ children }) {
159+
const [title, setTitle] = useState('useContext')
160+
const [content, setContent] = useState('Context provides a way to pass data through the component tree without having to pass props down manually at every level')
161+
162+
function handleClick() {
163+
setTitle('Changed!')
164+
}
165+
166+
return (
167+
<Context.Provider value={{ title, content, handleClick }}>
168+
{children}
169+
</Context.Provider>
170+
)
171+
}
172+
173+
function Example() {
174+
return (
175+
<>
176+
<ContextProvider>
177+
<SubContainer />
178+
</ContextProvider>
179+
</>
180+
)
181+
}
182+
{% endraw %}
183+
```
184+
185+
145186
<br />
146187

147188
***
@@ -224,19 +265,27 @@ function SubContainer() {
224265
</>
225266
}
226267

227-
function Example() {
268+
function ContextProvider({ children }) {
228269
const [title, setTitle] = useState('useContext')
229270
const [content, setContent] = useState('Context provides a way to pass data through the component tree without having to pass props down manually at every level')
230-
271+
231272
function handleClick() {
232273
setTitle('Changed!')
233274
}
234-
275+
276+
return (
277+
<Context.Provider value={{ title, content, handleClick }}>
278+
{children}
279+
</Context.Provider>
280+
)
281+
}
282+
283+
function Example() {
235284
return (
236285
<>
237-
<Context.Provider value={{ title, content, handleClick }}>
286+
<ContextProvider>
238287
<SubContainer />
239-
</Context.Provider>
288+
</ContextProvider>
240289
</>
241290
)
242291
}

‎_site/404.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -452,21 +452,21 @@ <h2 class="panel-heading">Recently Updated</h2>
452452

453453

454454
<li class="text-truncate lh-lg">
455-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
455+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
456456
</li>
457457

458458

459459

460460

461461
<li class="text-truncate lh-lg">
462-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
462+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
463463
</li>
464464

465465

466466

467467

468468
<li class="text-truncate lh-lg">
469-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
469+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
470470
</li>
471471

472472

‎_site/about/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@
3838
<meta property="og:url" content="http://localhost:4000/about/" />
3939
<meta property="og:site_name" content="코딩하는 감자" />
4040
<meta property="og:type" content="article" />
41-
<meta property="article:published_time" content="2025-01-14T21:07:02+09:00" />
41+
<meta property="article:published_time" content="2025-01-15T12:03:55+09:00" />
4242
<meta name="twitter:card" content="summary" />
4343
<meta property="twitter:title" content="About" />
4444
<script type="application/ld+json">
45-
{"@context":"https://schema.org","@type":"WebSite","dateModified":"2025-01-14T21:07:02+09:00","datePublished":"2025-01-14T21:07:02+09:00","description":"Add Markdown syntax content to file _tabs/about.md and it will show up on this page.","headline":"About","name":"이어진","sameAs":["https://github.com/oding01"],"url":"http://localhost:4000/about/"}</script>
45+
{"@context":"https://schema.org","@type":"WebSite","dateModified":"2025-01-15T12:03:55+09:00","datePublished":"2025-01-15T12:03:55+09:00","description":"Add Markdown syntax content to file _tabs/about.md and it will show up on this page.","headline":"About","name":"이어진","sameAs":["https://github.com/oding01"],"url":"http://localhost:4000/about/"}</script>
4646
<!-- End Jekyll SEO tag -->
4747

4848

@@ -549,21 +549,21 @@ <h2 class="panel-heading">Recently Updated</h2>
549549

550550

551551
<li class="text-truncate lh-lg">
552-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
552+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
553553
</li>
554554

555555

556556

557557

558558
<li class="text-truncate lh-lg">
559-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
559+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
560560
</li>
561561

562562

563563

564564

565565
<li class="text-truncate lh-lg">
566-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
566+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
567567
</li>
568568

569569

‎_site/archives/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@
3838
<meta property="og:url" content="http://localhost:4000/archives/" />
3939
<meta property="og:site_name" content="코딩하는 감자" />
4040
<meta property="og:type" content="article" />
41-
<meta property="article:published_time" content="2025-01-14T21:07:02+09:00" />
41+
<meta property="article:published_time" content="2025-01-15T12:03:55+09:00" />
4242
<meta name="twitter:card" content="summary" />
4343
<meta property="twitter:title" content="Archives" />
4444
<script type="application/ld+json">
45-
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-01-14T21:07:02+09:00","datePublished":"2025-01-14T21:07:02+09:00","description":"우당탕탕 와르르멘션 개발일지","headline":"Archives","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/archives/"},"url":"http://localhost:4000/archives/"}</script>
45+
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-01-15T12:03:55+09:00","datePublished":"2025-01-15T12:03:55+09:00","description":"우당탕탕 와르르멘션 개발일지","headline":"Archives","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/archives/"},"url":"http://localhost:4000/archives/"}</script>
4646
<!-- End Jekyll SEO tag -->
4747

4848

@@ -606,21 +606,21 @@ <h2 class="panel-heading">Recently Updated</h2>
606606

607607

608608
<li class="text-truncate lh-lg">
609-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
609+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
610610
</li>
611611

612612

613613

614614

615615
<li class="text-truncate lh-lg">
616-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
616+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
617617
</li>
618618

619619

620620

621621

622622
<li class="text-truncate lh-lg">
623-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
623+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
624624
</li>
625625

626626

‎_site/assets/js/data/search.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_site/assets/js/data/swconf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const swconf = {
22

3-
cacheName: 'chirpy-1736856423',resources: [
3+
cacheName: 'chirpy-1736910236',resources: [
44
'/assets/css/jekyll-theme-chirpy.css',
55
'/',
66

‎_site/categories/blogging/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -538,21 +538,21 @@ <h2 class="panel-heading">Recently Updated</h2>
538538

539539

540540
<li class="text-truncate lh-lg">
541-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
541+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
542542
</li>
543543

544544

545545

546546

547547
<li class="text-truncate lh-lg">
548-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
548+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
549549
</li>
550550

551551

552552

553553

554554
<li class="text-truncate lh-lg">
555-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
555+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
556556
</li>
557557

558558

‎_site/categories/demo/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -514,21 +514,21 @@ <h2 class="panel-heading">Recently Updated</h2>
514514

515515

516516
<li class="text-truncate lh-lg">
517-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
517+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
518518
</li>
519519

520520

521521

522522

523523
<li class="text-truncate lh-lg">
524-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
524+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
525525
</li>
526526

527527

528528

529529

530530
<li class="text-truncate lh-lg">
531-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
531+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
532532
</li>
533533

534534

‎_site/categories/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@
3838
<meta property="og:url" content="http://localhost:4000/categories/" />
3939
<meta property="og:site_name" content="코딩하는 감자" />
4040
<meta property="og:type" content="article" />
41-
<meta property="article:published_time" content="2025-01-14T21:07:02+09:00" />
41+
<meta property="article:published_time" content="2025-01-15T12:03:55+09:00" />
4242
<meta name="twitter:card" content="summary" />
4343
<meta property="twitter:title" content="Categories" />
4444
<script type="application/ld+json">
45-
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-01-14T21:07:02+09:00","datePublished":"2025-01-14T21:07:02+09:00","description":"우당탕탕 와르르멘션 개발일지","headline":"Categories","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/categories/"},"url":"http://localhost:4000/categories/"}</script>
45+
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-01-15T12:03:55+09:00","datePublished":"2025-01-15T12:03:55+09:00","description":"우당탕탕 와르르멘션 개발일지","headline":"Categories","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/categories/"},"url":"http://localhost:4000/categories/"}</script>
4646
<!-- End Jekyll SEO tag -->
4747

4848

@@ -855,21 +855,21 @@ <h2 class="panel-heading">Recently Updated</h2>
855855

856856

857857
<li class="text-truncate lh-lg">
858-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
858+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
859859
</li>
860860

861861

862862

863863

864864
<li class="text-truncate lh-lg">
865-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
865+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
866866
</li>
867867

868868

869869

870870

871871
<li class="text-truncate lh-lg">
872-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
872+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
873873
</li>
874874

875875

‎_site/categories/tutorial/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -514,21 +514,21 @@ <h2 class="panel-heading">Recently Updated</h2>
514514

515515

516516
<li class="text-truncate lh-lg">
517-
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
517+
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
518518
</li>
519519

520520

521521

522522

523523
<li class="text-truncate lh-lg">
524-
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
524+
<a href="/posts/react-hooks-state-ref/">[React] React Hooks: useState vs useRef 사용법과 예제</a>
525525
</li>
526526

527527

528528

529529

530530
<li class="text-truncate lh-lg">
531-
<a href="/posts/gitblog-create/">GitHub 블로그를 생성해보자! - Chirpy 테마</a>
531+
<a href="/posts/how-to-use-usecontext/">[React] React Hooks: useContext로 전역 상태 관리하기</a>
532532
</li>
533533

534534

0 commit comments

Comments
 (0)