리액트를 사용하다 보면 컴포넌트 구조가 깊어지는 경우가 있다. 나는 예전에 리액트를 처음 공부할 때, atomic단위로 컴포넌트를 잘게잘게 쪼개어 개발한 경험이 있는데, 이때 상위 컴포넌트와 하위의 하위의 하위~ 컴포넌트의 깊이가 너무 깊어졌고, 이때 상위 컴포넌트의 데이터를 맨 밑바닥의 컴포넌트에게 전달해야 할 때, 불필요한 데이터를 중간단계에 위치한 컴포넌트들이 전달하는 불필요한 상황을 경험했다. 공부해보니 이를 'Props Drilling' 현상이라고 한다. 오늘 설명할 Context API는 이런 번거로움 없이 데이터를 신의탑 웹툰의 '신수'마냥 전역적으로 공유할 수 있게 해주는 도구이다.(신수는 공기와 비슷한,,, 애니만화 덕후라 죄송합니다;;)그럼 이것을 어떻게 사용할 수 있을까? Con..

intro 안녕하세요. 오늘은 도대체 왜 리액트에서 불변성을 강조하고,또 불변성을 지키면서 코드를 짜야 하는지 의문이 들어 게시글을 포스팅하게 되었습니다. 그럼 바로 시작해보겠습니다! 불변성이란?리액트를 공부하다 보면 가장 많이 듣는 단어 중 하나가 바로 '불변성'이죠. 의미는 상태를 직접 수정하지 말고 변하지 않게 하라는 말입니다. 하지만 왜 그렇게 번거롭게 그렇게 해야할까요?저는 리액트에서 불변성을 지켜야 하는 이유를 3가지로 정리했습니다. 1. 효율적인 상태 변경 감지 리액트는 상태가 변했는지 확인하기 위해 '얕은 비교'를 수행합니다.리액트에서는 얕은 비교와 깊은 비교가 있는데요, 여기서 얕은 비교는 객체의 깊숙한 곳 까지 일일이 비교하지 않고 성능상 빠르게 비교하는 방식입니다. 상태는 크게 ..

intro 안녕하세요. 오늘은 useRef를 사용하는 중, 왜 useRef는 리렌더링을 피할수 있는지에 대한 의문이 들어 포스팅을 하게 되었습니다. 1. useRef가 리렌더링을 피하는 이유? useRef가 값을 변화시켜도 UI를 변화시키지 않는 이유는 리액트의 렌더링 사이클에 개입하지 않기 때문이라고 합니다.자주쓰이는 useState와 비교를 하자면, - useState: 값이 변하면 리액트에게 "데이터 변했으니까 화면 다시 그려!"라고 트리거(알람)을 보냅니다. - useRef: 값이 변해도 리액트에게 아무런 소식을 전하지 않습니다. 그냥 메모리 어딘가에 저장된 자바스크립트 객체의 속성만 바꿀 뿐입니다. 객체의 속성을 그냥 바꾸기만 한다고? 그게 무슨소리일까요? 코드를 통해 예시를 들어보겠습니다..

intro안녕하세요, 오늘도 리액트 공식문서 읽기로 돌아왔습니다.이번시간이 공식문서 관련해서 포스팅하는건 마지막같네요.해당 게시글은 리액트 공식문서에서 파트별로 마지막에 챌린지를 하는 부분에서어렵거나 헷갈렸던 코드들을 정리해보았습니다.그럼 바로 start~ 컴포넌트에 Props 전달하기function Card({ children, title }) { return ( {title} {children} );}export default function Profile() { return ( Aklilu Lemma was a distinguished Ethiopian scienti..

intro 이번 시간에는 리액터 공식문서 초반 페이지에 있는 틱택토 게임을 만들어 보고, 학습한 내용을 정리해보겠습니다.1. full code import { useState } from "react";function Square({ value, onSquareClick }) { return ( {value} );}function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i 조기리턴 return..