React

📝 Recoil 공식 문서https://recoiljs.org/ko/이번 최종 프로젝트에서 상태관리를 recoil로 작업하려고 해서 recoil이 뭔지 어떻게 쓰는지 공식 문서와 ChatGPT를 이용해서 알아보았다.atom의 형태 : atom({key: st

그동안 리액트를 공부하면서 리덕스(Redux)에 대한 내용을 정리하지 않았는데 잘 이해를 못하기도 했고 너무 어려워서 정리를 멈추고 흐름을 이해하고 작성하고자 기다렸다.이제서야 말할 수 있는! 리덕스가 무엇이고 왜 사용하는지, 어떻게 사용하는지 정리해 보려고 한다.리덕

React는 JSX라는 Javascript를 확장한 문법이다.html과 비슷하게 생겼으면서도 Javascript의 기능으로 구성되어 있기 때문에 평소에 만들던 html과는 조금 다른 부분이 있다.그 중에서 style 관련된 차별점에 대해 정리해 보는 글 😮🪄 참고로

오늘의 React 찍먹에서 배운 것은 바로 컴포넌트(component)이다.컴포넌트의 사전적 정의는 '구성 요소'이다.react 내에서는 특정 html 코드를 좀 더 보기 편하게 묶어놓는 방식이라고 생각된다.반복적으로 출현하는 덩어리들(html)을 컴포넌트화 할 때전환

오늘 공부한 내용 중 정말 나를 미치게 만든 내용이 한가지 있었는데, 바로 프롭스 드릴링(Props Drilling) 이다.프롭스 드릴링(Props Drilling)이란?상위 컴포넌트가 하위 컴포넌트로 Props를 전달할 때 발생하는 구조적 문제를 말한다.정말... 보

오늘 공부한 내용 중 정말 나를 미치게 만든 내용이 한가지 있었는데, 바로 프롭스 드릴링(Props Drilling) 이다.프롭스 드릴링(Props Drilling)이란?상위 컴포넌트가 하위 컴포넌트로 Props를 전달할 때 발생하는 구조적 문제를 말한다.정말... 보

UseState를 사용하는 이유?UI를 바꾸기 위해서다!🌱 블로그 내용 중 이유에 대해 잘 정리된 글이 있어서 가져왔다.https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9

📚 axios 관련 좋은 글들 모음🔗 axios-http.com🔗 Inpa Dev지금까지 바닐라 JS건, 리액트건 모두 서버가 없는 환경에서 작업을 하다 보니 새로고침을 하면 자동으로 값이 날아가기 일쑤였다.하지만 받은 값을 저장할 수 있다면 얼마나 좋을까?이번

🔗 이미지 : React hooks best practices in 2021React를 사용하다 보면 훅! 이라는 것을 자주 접하게 된다.리액트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.📖 Reac

리액트에는 라이프 사이클이라는게 있다.🔗 출처: 위키 백과라이프 사이클, 즉 리액트의 생애 주기에 대해 알아보자.사실 리액트가 아니더라도 일반적인 Dom도 라이프 사이클을 갖고 있다.하지만 리액트는 Vitual Dom 이라는 가상 Dom을 사용하기 때문에 비슷하면서도

React의 올바른 구조가 공부할때마다 궁금했는데오늘에서야 그 해답(?)을 찾을 수 있었다.이번 과제로 todo 리스트 만들기를 진행했는데 redux 패키지까지 입힌 모습이다.여기서 새롭게 알게된 점을 정리하자면 다음과 같다.page에는 이동관련 페이지들만 들어가는 것

이미지 출처: https://dkje.github.io/2020/10/13/StyledComponents/Styled Componentshttps://styled-components.com/styled components는 javascript에서 cs

앞으로 자주 사용할 React와 Redux 설치하는 방법!기본적으로 터미널에서 명령어를 입력해서 다운을 받는다.npm 혹은 yarn으로 실행 시킬 수 있다.물론 npm, yarn이 설치된 상태에서 사용 가능 하다.원래 npm을 주로 사용했는데 yarn이 좀 더 터미널에

일반 리액트 프로젝트(CRA)를 실행시키는 방법과 Vite를 사용해서 실행시키는 커멘드가 다르다.

UI를 서버에서 렌더링하는 것을 의미한다.리액트 프로젝트는 기본적으로 클라이언트 사이드 렌더링을 하고 있다. 클라이언트 사이드 렌더링은 UI 렌더링을 브라우저에서 모두 처리하는 것으로 JS를 실행해야 만든 화면이 사용자에게 보여진다.검색 엔진이 우리가 만든 웹 페이지를

Ref 란? DOM을 꼭 직접적으로 건드려야할 때 사용한다. 특정 input에 포커스 줄 때 스크롤 박스 조작할 때 Canvas 요소에 그림 그리기 등등... ref를 사용하는 방법 1. 콜백 함수를 통한 ref 설정 useRef 훅을 사용해서 ref를 생성하는 방

리액트 강의를 듣다보면 꼭 나오는 쓰로틀링과 디바운싱에 대해 알아보자.쓰로틀링은 특정 동작이 주어진 시간 동안 최대 한 번만 발생하도록 하는 기술.예를 들어, 사용자의 스크롤 아밴트에 대응해 특정 함수를 호출할 때, 쓰로틀링을 사용하면 연속적인 스크롤에 대한 함수 호출