위의 코드는 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순수성이란 무엇인지 그리고 어떻게 버그를 피하도록 도울 건지 배웁니다.렌더 단계에서 변화를 유지하면서 컴포넌트를 순수하게 유지할 것인지 배웁니다.엄격 모드를 어떻게 활용해
배열 내부의 객체는 배열 안에 있지 않다. 위와 같은 객체가 있습니다. 이러한 객체는 중첩되어 존재하는 것처럼 보입니다. 하지만 객체들은 그저 그렇게 보일 뿐, 독립적으로 존재합니다. 이렇게 별도로 존재합니다. 그저 해당 객체를 가리키고 있을 뿐입니다. 그렇기 때