리액트

위의 코드는 clickHandler 컴포넌트로 여러 동작들을 하나의 소규모 동작을 수행하는 작은 코드들로 나누어 관리할 수 있게끔 하는 컴포넌트다.리액트에서 값을 수정하고자 할때 값을 =연산자로 할당하면 리엑트에서 인지하지 못하여 업데이트를 해주지 않습니다. 따라서 값

리액트에서 상태를 업데이트할 때, 기존 상태에 의존하는 값으로 업데이트를 수행해야 할 때가 있다. 이때 "함수 양식"을 사용하여 상태를 업데이트할 수 있다.함수 양식은 이전 상태를 매개변수로 받고, 새로운 상태를 반환하는 함수다. 이전 상태를 받아 새로운 상태를 계산하

함수 폼을 사용할 때 업데이트가 이전 state에 의존하는 경우에만 사용해야 한다. useState를 사용할 때 다른 state의 값을 기반으로 state의 값을 변경하면 위험하다. 제 시간에 처리되지 않아 순서가 보장되지 않을 수 있다.함수형 업데이트는 useStat

리액트에서 커스텀 컴포넌트로 다른 컴포넌트를 감싸는 래퍼 객체로 사용하면안에 있는 요소들이 죽는다.왜냐하면 html에서 제공하는 tag는 자동으로 props.children 을 넣어주지만 커스텀 컴포넌트는 별도로 넣어줘야 한다.

리액트는 상태 업데이트를 즉시 하지 않고 예약을 한다.따라서 하나의 상태관리 함수가 여러 상태를 관리하게 된다면문제가 발생할 수 있다.

같은 소스에 기반하고 있는 상태(state)가 여러개라면 하나로 줄일 수 있는 방법이 있다.설정하는 상태(state)가 다른 상태(state)와 직접적으로 연결되어 있다면별도의 상태(state)로 관리하는 것은 좋지 않다.

싱글 페이지 어플리케이션에서 링크를 통해 다른 페이지를 보여주면 새로고침이 되며 처음부터 데이터를 받아오게 된다.리액트 내부에서 url을 바꿔줌으로써 새로고침 없이 화면을 전환할 수 있다.createBrowserRouterRouterProviderNavLinkusePa

컴포넌트에서 특정 DOM을 선택해야할 때에는 ref를 사용해야 한다.javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector특정 DOM에 접근할 때 사용한다.외부 라이브러리 사용할때 유용하다.원하는 위치에 ref=

위의 코드는 유데미의 리액트 강의 영상 안의 예시 코드입니다.https://www.udemy.com/course/best-react/ 수강하면서 배운 내용을 주관적인 입장에서 작성했습니다.오류가 있을 수 있으니 알려주시면 감사하겠습니다!SPA(Single Pa

리액트 라우터에는 여러 종류가 있습니다.createMemoryRoutercreateHashRoutercreateStaticRoutercreateBrowserRouterhttps://reactrouter.com/en/main/routers/picking-a-ro

리액트 쿼리와 리덕스를 사용해서 로그인 기능을 구현해보고자 합니다.리덕스로는 유저 데이터를 전역적으로 관리할 예정입니다.로그인, 로그아웃에 따라 isLoggedIn:불린, user:객체 이런 형식으로 데이터를 저장했습니다.리액트 쿼리로는 로그인 토큰을 관리하고자 합니다

인강에서 vite로 리액트를 설치해서 저도 cra 말고 vite로 설치 시도를 했습니다.다음과 같은 명령어를 입력하면 sparta-lecture-react의 이름으로 폴더가 생기고 안에 들어가서 명령어를 입력해서 필요한 패키지들을 추가로 다운받으면 됩니다.강의 설명에서

https://ko.react.dev/learn/keeping-components-pure순수성이란 무엇인지 그리고 어떻게 버그를 피하도록 도울 건지 배웁니다.렌더 단계에서 변화를 유지하면서 컴포넌트를 순수하게 유지할 것인지 배웁니다.엄격 모드를 어떻게 활용해

배열 내부의 객체는 배열 안에 있지 않다. 위와 같은 객체가 있습니다. 이러한 객체는 중첩되어 존재하는 것처럼 보입니다. 하지만 객체들은 그저 그렇게 보일 뿐, 독립적으로 존재합니다. 이렇게 별도로 존재합니다. 그저 해당 객체를 가리키고 있을 뿐입니다. 그렇기 때

https://ko.react.dev/learn/manipulating-the-dom-with-refs공식문서를 읽어가며 리액트의 기초를 공부하는 중에 너무 새로운 것을 배우게 됐습니다.돔 엘리먼트의 ref 프로퍼티가 콜백을 받는 모습에서 뭔가 제가 잘못 알고

위의 그림은 월별 가게부 프로그램을 props drilling, context, redux 중에 첫번째 props drilling 을 이용하여 만든 코드의 관계를 설명한 그림이다.원래는 데이터 전체는 백앤드에서 관리하지만 모의 프로젝트인 관계로 데이터를 프론트 영역에서

컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅화면이 실제로 업데이트 되기 이전에 동기적으로 실행이 되는 특징이 있다.us

맨처음 딥다이브로 혼자서 클래스 공부할 때 이해가 잘 안될 뿐더러 정말 정말 이런거 왜 배우나 싶었던 기억이 있습니다.꾹 참고 어거지로 읽어놓은 것이 이제야 도움이 되네요 ㅎㅎㅎ튜터님께 axios를 배우면서 class 문법을 통해 효율적이고 편리한 코드를 작성하는 방법

위의 코드는 클릭했을시 값이 업데이트 되는데 state의 가장 최신값으로 업데이트 하고 싶어서 setter 함수 내부에서 값을 받아서 setter 함수 밖에서 다른 값을 업데이트하는 로직입니다.weekdayResult가 if 문에서 업데이트 되지 않아서 처음에 당황했는

1. 시작 최종 발표회에서 우리 프로젝트를 보러 오신 외부 참석자분께서 소스 코드를 살펴보시고 메모이제이션에 대해 질문하셨습니다. "메모이제이션을 넣을 만한 부분이 보이는데, 혹시 넣지 않은 이유가 있나요?"라는 질문이었습니다. 우리 팀원이 잘 대답해주긴 했지만, 저는