React Context란?컴포넌트간의 데이터를 전달하는 또 다른 방법 ,기존의 `props`가 가지고 있던 단점( props drilling) 을 해결하기 위해 존재한다. 왜 필요할까?React에선 데이터를 전달하기 위해 props를 사용하는데요Props는 부모 -> 자식 으로만 값을 전달할 수 있습니다. App -> childA 이런 경우 문제?(불편함이)되지 않음, But App -> childA -> childB 이런경우 App이 childB로 데이터를 전달하려면 바로 전달하지 못하고 childA 가 중간 다리 역할을 해야함 // App 이 ChilB에 데이터를 넘기려면 //이런걸 Props drilling  그래서 childA에서 쓰지도 않는 데이터를 chil..

useRef란 뭘까? `useRef` 는 이름부터 Reference(참조) 를 만드는 Hook입니다.또,, `useState`와 비슷합니다.. 헷갈릴 수 있지만 사용 목적과 동작 방식은 꽤 다릅니다. useRef VS useState항목useRefuseState역할참조 객체 생성상태 값(State) 저장값 변경 시리렌더링 안 됨리렌더링 발생주요 용도DOM 접근 및 조작 가능, 값 유지용 변수UI 상태 관리 (ex. 토글, 입력값)값 접근 방식`ref.current`state 변수 이름 그대로 어떻게 사용할까요 ? import { useRef } from "react";const refObj = useRef(); // 초기값은 undefined 해당 refObj 를 console.log 로 찍어보면 `{..

useReducer은 뭘까?useState와 거의 비슷하다고 볼 수 있다..사실 더 정교하게 상태를 제어할 수 있는 Hook 입니다.모든 `useState` 는 `useReducer`로 대체가 가능합니다!특히 상태가 복잡해질수록 `useReducer`가 더 깔끔하고 유지보수에 좋습니다~~. 왜 `useReducer`를 써야할까? `useState`를 사용한다면, 컴포넌트 내부에 상태 관리 코드를 작성해야한다는 점이 있었죠, 그렇게 되면 코드가 섞이게 됩니다.(App에 작성하면 ,, 너무 복잡혀요)function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (c..

`useEffect` 란 무엇인가? 바로 이전 글에서 React의 생애주기 (Life Cycle) 를 살펴봤는데요이제는 그 생애 주기 속에서 일어나는 사이드 이펙트(Side Effect)를 제어하는 방법인 `useEffect` 에 대해 알아봅시다. 사이드 이펙트란? : 쉽게 말해서 렌더링 외에 발생하는 모든 행동이라 보면 됩니다.서버에 데이터 요청하기 ( API 요청 )콘솔에 로그 찍기DOM에 직접 접근하기이벤트 리스너 등록/해제 하기타이머 설정 및 정리하기이런 것들이 모두 다 사이드 이펙트라고 볼 수 있다. `useEffec` 는 그럼 뭘 할까요 ? 바로 : 사이드 이펙트를 실행하는 함수 라고 보면 됩니다. 이 함수는 컴포넌트의 생애 주기 ( Mount, Update, Unmount ) 를 따라 실..

리액트 컴포넌트도 사람처럼 생애 주기가 있습니다.유아기 컴포넌트, 청소년기 컴포넌트, 성인기 컴포넌트는 아니고요... React에서는 Mount, Update, Unmount라는 세 가지 단계로 생애 주기를 구분합니다.  1. Mount ( 탄생의 순간 ): 컴포넌트가 화면에 처음 나타날 때 발생합니다.즉, 처음 렌더링되는 시점이죠 주로 사용하는 경우는 서버에서 데이터를 불러올 때 (`fetch`, `axios` 등)초기에 이벤트 리스너 등록 등 초기 설정할 때2. Update ( 변화의 순간 ): 컴포넌트가 리렌더링 될 때 발생합니다.`state`나 `props` 가 바뀔 때마다 다시 그려지는 과정입니다. 주로 사용하는 경우는특정 값이 변경될 때 콘솔에 로그를 찍거나DOM에 직접 접근해 효과를 줄 때 ..

`useState` 란 React 훅(Hook) 중 하나로, 컴포넌트에서 상태 (State) 를 관리하기 위해 사용된다.  상태는 컴포넌트에서 바뀔 수 있는 데이터를 의미한다, 예를 들어, 사용자 입력값, 클릭 횟수, API 에서 받아온 데이터 등이 상태로 관리된다.  useState 사용법은 먼저 `import { useState } from 'react';` 로 import 해 준 다음,  최상단에 `const [ count, setCount ] = useState(초기값);` 으로 사용할 수 있다 예시코드 import { useState } from 'react';function App() { // useState 사용법 const [count, setCount] = useState(초기값); ..

출처 : 이정환의 한 입 크기로 잘라 먹는 리액트  배포 준비를 위해 해야할 마지막 작업..강의에서 간단한 프로젝트 제작 후 localStroage를 이용하여 간단한 데이터 저장까지 구현한 뒤 간단하게 몇 가지 완성도를 높힌 후 배포를 해보려고 합니다.  1. 페이지 타이틀 설정하기 ( 웹 브라우저 탭에 표시되는 페이지의 제목 ) 2. Favicon 설정하기 ( 브라우저 탭에 표시되는 작은 아이콘 ) 3. 오픈 그래프 태그 설정하기4. 프로젝트 빌드 (Build)  순으로 진행해 보겠습니다.   뭐,, 페이지 제목같은 경우 따로 커스텀 훅을 만들어서 재사용할 수 있게 만들었습니다.import { useEffect } from "react";const usePageTitle = (title) => { u..

웹 스토리지란 데이터를 브라우저에 보관하는 방법, 일종의 데이터베이스(DB) 라고 보면 된다. 웹 브라우저에 기본적으로 내장되어 있는 데이터베이스별도의 프로그램 설치 필요 X, 라이브러리 설치 필요 X자바스크립트 내장함수 만으로 접근 가능.  ex) 값을 저장 : localStorage.setItem(key, value)값을 꺼냄 : localStorage.getItem(key)* key 값은 무조건 원시 타입(숫자나 문자열)으로 넣어줘야 함. 웹 스토리지의 종류 1. SessionStorage브라우저 탭 별로 데이터보관 ,탭이 종료되기 전까지는 데이터가 유지 (새로고침)탭이 종료되거나 꺼지면 데이터 삭제됨. 2. LocalStorage사이트 주소별로 데이터 보관 가능사용자가 직접 삭제하기 전까지 데이터..

[서론]오늘 이 오류때문에 거진 4시간을 날려먹었는데, 다행히도 해결할 수 있어서 너무 기분이 좋습니다.저는 코딩 공부할 때  노트북과 데스크톱, 중 주로 하나를 사용하는데, 보통은 데스크톱으로 많이 이용합니다.연휴 동안에 그래도 공부 조금이라도 더 해보려고 노트북을 가져가서 공부를 하려고 했습니다.. 기존에 git에 올려놓은 내용을 pull 받아서 쉽게 작업하려 했지만, 아뿔싸 데스크톱에서 push 를 안해놓은 바람에 작업하던 내용을 이어가기 힘들게 됐습니다.그래도 복습해보자 라는 마음으로 다시 react 파일을 설치하는데 계속 에러가 발생하게 됩니다.. 저는 Vite를 통해서 React를 설치하는데   Vite를 통해 React를 설치하는 과정은 다음과 같습니다:node.js 설치하고 -> `npm ..

리액트란 뭘까? Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리입니다. 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술임.  라이브러리란 뭘까? 프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓는것을 의미.프레임워크랑은 다른 의미  React의 기술적인 특징1. 컴포넌트를 기반으로 UI를 표현한다.2. 화면 업데이트 구현이 쉽다.3. 화면 업데이트가 빠르게 처리된다.  컴포넌트를 기반으로 UI를 표현한다. 1. 컴포넌트 (Component) : 우리말로 "구성요소" 라는 뜻 즉 화면을 구성하는 요소, UI 를 구성하는 요소를 말함.*마크업 (Mark UP) : UI 구현이라고 생각하면 됨.중복 코드 발생을 최소화 하기 위함. 또한 유지보수..