본문 바로가기

📑Library5

리액트 쿼리 쿼리키를 이용한 검색, 카테고리 기능, 다중 필터 🐸 : 이 글은 아래 그림의 빨간 네모 부분과 같은 상단 nav바, 카테고리나, 검색기능을 구현하기 위해서 리액트 쿼리를 사용한 기록이다. 📌 이글을 이해하기 위해 알아야할 것들 1. react를 할 줄 알아야해요 2. react-query를 사용해여 3. axios를 이용한 통신으로 데이터를 받아오는 가정이에요 아래와 같이 useQuery에서 querykey를 넣는 부분에 두번째 인자부터 값을 넘겨서 querykey안에 있는 정보를 꺼내 쿼리스트링을 통해 서버와 통신할 수 있다. // src/components/main const [currentCategory, setCurrentCategory] = useState(""); const [searchInput, setSearchInput] = useSt.. 2023. 3. 29.

클래스형 컴포넌트와 함수형 컴포넌트의 차이 📑 클래스형 컴포넌트와 함수형 컴포넌트 물론 클래스형 컴포넌트와 함수형 컴포넌트는 하는 일은 동일하지만, 코드 구조에서 약간의 차이가 있으며 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook 을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거, 함수형 컴포넌트는 state 와 라이프 사이클 API 를 사용할 수 없다는 단점이 있었지만 현재, 훅에 의해 이 모든 문제가 해결되었다. // 클래스형 컴포넌트 class App extends Component { state = { count: 0 } increase = ().. 2022. 12. 9.

React를 사용하는 이유 🙋🏻‍♂️프론트엔드 라이브러리 등장 배경 프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다. 정적 웹 페이지 웹 서버에 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지. 단순히 정보를 전달하기 위한 목적이기 때문에 로그인을 한다거나 뭔가 정보를 보낸다거나 하는 상호작용은 중요하지 않은 요소로 볼 수 있다. 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 된다. 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 웹 페이지를 만들 수 있다. Ex) 홈페이지에 회사소개, 음식메뉴, 포트폴리오 등 내용이 변하지 않고 고정적인 페이지. 동적 웹 페이지 요청 정보를 처리한 후에 제작된 HTML .. 2022. 12. 9.

Redux(리덕스)란? Redux(리덕스)란? 리덕스란 자바스크립트 상태관리 라이브러리이다. 우선 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JAVASCRIPT 내에서도 사용이 가능하다. 컴포넌트에 집중된 리액트와 시너지가 좋으니 대체적으로 리액트에 리덕스를 사용할 뿐이다. Redux의 기본 개념 : 세 가지 원칙 Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. Changes are made with pure functions 변경은 순수함수로만 .. 2022. 12. 8.

이전 1 2 다음

티스토리툴바