Front-end12 Tanstack Query (React-query) 왜 써야할까? 요약 Tanstack Query는 HTTP 요청을 전송하고 Frontend 사용자 인터페이스를 벡엔드 데이터와 동기화된 상태로 유지하는 데 이용하는 라이브러리이다. 물론 이 작업을 할때 useEffect와 fetch 함수로도 할 수 있다. 근데 useEffect, useState 같은 리액트에 내장된 기능을 이용하고 브라우저에 내장된 fetch 함수를 이용한다면 상태 관리, useEffect 훅 작성을 위해 많은 양의 코드를 작성 해야한다. 근데 Tanstack Query를 이용하면 코드가 매우 간결해져서 훨씬 수월하게 작업할 수 있다. -> 여러 가지의 기능이 기본적으로 내장 되어 있기 때문이다. 이 Tanstack Query 라이브러리를 이용하면 상태 관리, 캐시 처리, 자체적으로 처리되는 데이터 가.. 2024. 1. 5. Children-prop React의 childern 프로퍼티는 React 컴포넌트의 특별한 프로퍼티 중 하나이다. 컴포넌트 태그 사이에 위치한 JSX코드나 요소들을 나타낸다. 즉, 부모 컴포넌트가 자식 컴포넌트에게 어떤 내용이 전달되었는지 확인 시켜준다. ParentComponent는 App 컴포넌트에서 전달된 요소를 children 프로퍼티를 통해 받아내고 출력한다. 이런식으로 children 프로퍼티를 사용하게 된다면 부모 컴포넌트가 자식 컴포넌트에게 어떤 내용을 전달하는지 동적으로 다양한 형태의 컴포넌트를 작성할 수 있다. 이를 통해 컴포넌트 간의 재사용성이 높아지고, 보다 유연하게 컴포넌트를 구성할 수 있다. 2024. 1. 4. 리액트 상태(state) 자 이제 컴포넌트에 대해 알아봤으니까 그 다음 아주 중요한 핵심인 state에 대해 알아보자! 기본 개념을 우선 말하고 가자면 웹 사이트가 어떤 상태에 있을 수 있는데 그 상태가 여러 개 있을 수 있다. 웹 사이트가 동적이라면 상태라는 게 많이 존재할 것이다. 만약에 글쓰기 칸에 내가 글을 쓰는 순간 어플리케이션의 상태가 바뀌게 되는 것이다. 그렇게 상태가 바뀌면 리액트는 UI를 변경해준다. 지금부터 예를 들어 작성자는 textarea를 생성해서 그 칸 안에 작성을 함에 따라 밑에 똑같이 적히게 UI를 변경해주는 작업을 하여 state에 대해 알아 보겠다. 먼저 textarea를 생성하기 위해 새로운 NewPost.jsx 파일을 생성 했다. 여기서 하나 짚고 넘어가면 왜 for이 아닌 htmlFor이냐면.. 2024. 1. 4. 리액트 컴포넌트 (3) 그럼 이제 컴포넌트를 실제적으로 활용하기 위해 알아가보자! 지금까지 만들어둔 Post 컴포넌트는 출력할때 두 가지중 하나만 출력하는데 실제로 사용할땐 데이터베이스에서 가져와 컴포넌트를 재사용하게 된다면 매번 다른 내용을 출력해야할 것이다. 각각의 컴포넌트가 독립적으로 동작하거나 보여지도록 만들기 위해서는 컴포넌트에 데이터를 전달할 수 있어야 한다. 이때 사용하는 것이 props이다. 동시에 PostsList라는 새로운 컴포넌트를 하나 생성했다. 지금 생성한 컴포넌트들의 연결성은 어떻게 되냐하면 PostsList라는 컴포넌트를 만들어 목록으로 뿌리고 그 목록에 Post의 내용이 나오게 생성하였다. 다른 것을 다 제쳐두고 딱 두 가지만 여기서 생각하기로 하자. 1. props 는 여러 곳에서 재사용하는데 각.. 2023. 12. 27. 이전 1 2 3 다음
