React

데이터를 수정할 때, 기존 데이터를 보여줘야 하니 input 태그에 value값으로 넣어줬고 잘 보였음. 그런데 새로운 값을 입력하려는데 입력이 안되더라고... 왜이러지?하고 잠깐 뇌정지 후 콘솔 창을 봤더니요런 warning이 나옴경고 메세지를 보면,1\. read-

React를 더 잘 이해하기 위한 정리노트 시리즈

++ React를 더 잘 이해하기 위한 정리노트 시리즈

나무위키 같은 단순 정보만들 전달하는 정적인 웹도 있지만, 넷플릭스 같은 동적인 웹들도 정말 많다. 이런 동적인 인터렉션을 구현하기 위해서는 동적 변수가 필요하다.리액트 컴포넌트는 JS + HTML 구조로 이루어져 있다.HTML만 사용하듯 쓸 수 있지만 그러면 리액트

\++ 리액트를 더 잘 쓰기 위한 정리 시리즈리액트의 큰 장점 중 하나는 컴포넌트의 재사용성이다. 같은 내용의 코드를 반복하지 않고도 커스텀 컴포넌트를 내장된 요소들처럼 사용할 수 있다.하지만 이런 컴포넌트를 얼마나 쪼개서 써야 좋을까?만약 App 컴포넌트 안에 여러

\++ 리액트를 더 잘 쓰기 위한 정리 시리즈컴포넌트가 많고 복잡한 앱일수록 최적화가 더욱 필요하다.여러 하위 컴포넌트를 중첩한 경우 상위 컴포넌트에서 새로운 상태로 업데이트가 되면 하위 컴포넌트들도 렌더링이 된다. 불필요한 컴포넌트들이 렌더링이되고, 그 수가 많을수록

++ 리액트를 더 잘 쓰기 위한 정리 시리즈 Context API가 있는데 Redux를 왜 쓰나요? 앞선 시리즈에서 보듯 Context API를 사용해 얻을 수 있는 큰 장점이 있다. App 컴포넌트에서 자식의 자식의 자식의 자식 컴포넌트에게 대물림하는 Props

++ 리액트를 더 잘 쓰기 위한 정리 시리즈 Props Drilling 쇼핑 앱에서 장바구니 기능을 만들었다고 가정해보자. Cart 컴포넌트와 Product 컴포넌트 모두 장바구니에 필요한 상태관리가 필요하다. 그러려면 App 컴포넌트에서 장바구니 아이템을 정의하고

++ 리액트를 더 잘 쓰기 위한 정리 시리즈 유저 이름을 설정하면 그 이름을 보여주는 컴포넌트를 만든다고 생각해보자. 아래 코드처럼 onChange 함수와 useState를 사용하면, 사용자가 이름을 입력할때마다 렌더링이 발생한다. useRef를 사용하는 첫번째 경

\++ 리액트를 더 잘 쓰기 위한 정리 시리즈리액트 쿼리를 사용하는 가장 큰 이유는 HTTP 비동기 요청과 빠른 UI 상태 업데이트 이 두 가지에 강점이 있기 때문이다.클라이언트 위주의 상태관리와 커스텀 훅은 서버 데이터를 가져오는데 최적화되어 있지는 않다. 언제 데이