Multi Developer SuHo

이번에는 리액트에서 전역적으로 데이터를 컴포넌트들에 전달하는 데 사용되는 Context와 useContext에 대해 알아보겠습니다.📑목차1. Context1-1. Context란?1-2. Context의 특징1-3. Context 문법1-4. Provider2. useContext 2-1. useContext 훅이란2-2. useContext를 사용한 예제 코드서론리액트에서 컴포넌트 간 데이터를 전달할 때 가장 일반적인 방법은 props를 사용하는 것입니다. 하지만 컴포넌트 구조가 깊어지고 여러 단계에 걸쳐 같은 데이터를 전달해야 할 경우, props 전달은 번거롭고 코드가 복잡해질 수 있습니다. 이러한 문제를 해결하기 위해 리액트는 Context API를 제공합니다. Context를 사용하면 전역적으..

안녕하세요~ 이번에는 리액트에서 커스텀 훅에 대해 알아보도록 하겠습니다. 커스텀 훅이 무엇이고, 언제 사용되는지, 왜 사용해야하는지 알아야 커스텀 훅을 사용할 수 있겠죠? 함께 알아보시죠~ 📑목차1. 커스텀 훅1-1. 커스텀 훅이란?1-2. 커스텀 훅의 특징1-3. 커스텀 훅을 사용하는 이유1-4. 커스텀 훅의 목적1-5. 커스텀 훅의 동작 원리1-6. 커스텀 훅의 문법서론 리액트를 사용하다 보면 여러 컴포넌트에서 동일한 로직을 반복적으로 작성하게 되는 경우가 많습니다. 이럴 때 코드의 재사용성과 가독성을 높이기 위해 사용하는 것이 바로 "커스텀 훅(Custom Hook)"입니다. 이번 글에서는 커스텀 훅이 무엇인지, 왜 사용해야 하는지, 커스텀 훅이 어떻게 동작하는지 살펴보시죠~본론1. 커스텀 훅1..

리액트 애플리케이션에서 상태 관리를 하다 보면, 서버와의 비동기 통신이 필요한 상황이 자주 발생합니다. 이때 redux-thunk를 사용하면 Redux 안에서 비동기 작업을 효율적으로 처리할 수 있습니다. 이번 글에서는 redux-thunk에 대해 알아보도록 하겠습니다.📑목차1. redux-thunk1-1. redux-thunk란?1-2. redux-thunk의 등장1-3. redux-thunk의 동작1-4. redux-thunk 문법1-5. redux-thunk의 목적1-6. Todo-List 실습 서론Redux를 사용하다 보면 "비동기 로직은 어디에 작성해야할까"라는 고민을 하게 됩니다. 예를 들어, API 요청을 보내고 그 결과를 상태에 반영하려고 할 때, Redux의 기본 구조만으로는 이를 처리..

안녕하세요~ 리액트에서 리덕스(Redux) 상태 관리 라이브러리에 알아보도록 하겠습니다. 리덕스를 왜 사용하는지 그리고 이전에 사용하던 useReducer랑은 무슨 관련이 있는지 살펴봅시다~ 📑목차1. 리덕스(Redux)1-1. 리액트에서 리덕스란?1-2. 리덕스의 장점과 단점1-3. 리덕스의 핵심 개념 Store, Action, Reducer1-4. 리덕스 문법1-5. useReducer와 redux 공통점 1-6. Store1-7. Action1-8. Reducer2. react-redux2-1. react-redux란?2-2. useSelector 2-3. useDispatch2-4. Provider 컴포넌트서론리액트는 컴포넌트 기반으로 구성되어 있어 UI를 효율적으로 개발할 수 있지만, 규모가..

안녕하세요~~ 이번에는 useReducer에 대해 알아보도록 하겠습니다. useReducer가 무엇이고 이 훅을 왜 사용하는지 한번 살펴보도록 하겠습니다.📑목차1. useReducer1-1. useReducer란?1-2. useReducer를 왜 사용할까?1-3. useState VS useReducer 차이점1-4. useReducer 기본 문법1-5. useReducer 동작 순서1-6. reducer 함수 구조1-7. useReducer 사용 예제 코드 서론useReducer 를 학습하시기 전에는 상태 관리를 useState로 했을겁니다. 하지만 애플리케이션이 복잡해지거나 상태 업데이트 로직이 길어지게 되면 useState만으로는 한계가 있기때문에 이런 복잡한 상태 관리 및 업데이트를 해줄 수 있..

안녕하세요~ 리액트에서 중요한 라우터에 대해 알아보겠습니다. 라우터가 무엇이고 왜 사용하는지 살펴보도록 하겠습니다.📑목차1. 라우터(Router)1-1. 리액트에서 라우터란?1-2. 리액트에서 라우터를 사용하는 이유1-3. react-router VS react-router-dom 차이2. react-router-dom 라이브러리2-1. react-router-dom 라이브러리란?2-2. BrowserRouter2-3. Routes2-4. Route2-5. Route 속성 (path, element)2-6. 라우팅 구조2-7. Link2-8. useParams2-9. useNavigate서론이전에는 라우팅을 했을때 이런식으로 하셨을 겁니다. node 환경에서는 다음 코드처럼 라우팅을 해서 클라이언트에게..

이번에 알아볼 내용은 리액트에서 css-in-javscript 즉, 자바스크립트 안에서 css 스타일을 작성하여 적용하는 방식에 대해 알아보도록 하겠습니다.📑목차1. css-in-javascript 1-1. css-in-javascript 란?1-2. css-in-javascript 특징1-3. css-in-javascript 라이브러리 종류2. styled-componenets2-1. styled-components 란?2-2. styled-components 설치2-3. styled-components 문법2-4. styled-components 적용 코드서론리액트로 프로젝트를 하다 보면, 컴포넌트마다 스타일을 어떻게 관리할지 고민하게 됩니다. 전통적인 CSS 방식은 점점 복잡해지고, 클래스명이 겹..