Front-end/React9 React-Router-Dom React-Router-Dom에 대해서 알아보자! 우선 간단하게 라우팅이란.. -> 네트워크의 경로를 선택하는 process 라고 말한다. 쉽게 풀어서 말하자면 내가 가야 할 곳의 목적지를 맞게 이동시켜 주는 작업이라고 볼 수 있다. React-Router를 사용하는 이유 리액트는 기본적으로 SPA(Single Page Application)이다. 컴포넌트의 변화가 단일 페이지 안에서 일어난다. 그렇기에 다른 URL로 이동한다고 해도 페이지 전체가 교체되는게 아니라 한 페이지에서 컴포넌트의 변화만 일어난다. -> 이렇기에 사용자의 히스토리가 생기기 않아 뒤로가기 기능을 수행 할 수없고 특정 페이지 북마크, 새로고침 기능이 불가능해진다. 이러한 단점을 React-Router로 보완한다. Router의 종류.. 2024. 1. 18. 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. 이전 1 2 3 다음
