리액트

위의 코드는 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:객체 이런 형식으로 데이터를 저장했습니다.리액트 쿼리로는 로그인 토큰을 관리하고자 합니다