728x90 JavaScript/React33 [React] 리액트 좋아요 기능 구현하기 useState문법 상태변수는 초기값을 갖고 있다. 해당 state변수의 값은 상태변경함수()만 사용해서 해당 값을 변경할 수 있다. let [상태변수, 상태변경함수] = useState( 초기 값) useState로 좋아요 기본 state 변수 값 셋팅 like 상태 변수 초기값 : 0 버튼을 누를 때 1씩 증가해야함으로 숫자 0으로 설정하는 것이다. setLike 상태변경함수 설정 버튼을 누를 때 1씩 증가해 줄 함수, 상태변경! let [like, setLike] = useState(0); // 블로그 이름 목록 초기 셋팅 let [blogName, setBlogName] = useState([ "코딩학원 추천","온라인 코딩 강의 추천","개발 블로그 추천", ]); 좋아요 누를 경우 숫자 올라가.. 2023. 3. 23. [React] React.Fragment 사용하기 const Component = () => { return ( 안녕하세요! 개발자또리입니다 ); }; 엘리먼트들은 반드시 단 하나의 최상위 태그로 묶여있어야 한다. 위 코드에선 div로 묶여있다. 리액트에선 최상위 태그로 묶지 않으면 SyntaxError(문법 에러)가 나온다. 이 법칙 때문에 의미없는 최상위 div태그를 감싸곤 하는데 불필요한 태그는 눈엣가시처럼 불편하기 때문에 리액트에서 제공하는 를 사용하면 실제 DOM에 별도의 node를 추가하지 않고도 엘리먼트들을 묶어줄 수 있다. 는 로 대신 사용가능. const Component = () => { return ( 안녕하세요! 개발자또리입니다 ); }; 위 코드는 div태그를 없애고 React.Fragment를 사용한 것이다. React.Frag.. 2023. 3. 21. [React] 리액트로 검색 기능 구현하기 우리가 웹에서 가장 많이 사용하는 기능 중 하나는 검색기능이다. 리액트와 MongoDB로 검색 기능을 구현해보자 ! node.js로 이미지/정보 저장 후, MongoDB에 저장 후... [Client] SearchPage.js 페이지 만들기 import React, { useState } from "react"; import { Input } from "antd"; const { Search } = Input; function SearchPage() { return ( ); } export default SearchPage; AllData.js 만들기 import axios from "axios"; import React, { useEffect, useState } from "react"; import .. 2023. 3. 20. [React] Redux 상태 관리 라이브러리 Redux ? Redux란 2015년에 Dan Abramov씨와 Andrew Clark씨에 의해 작성된 상태 관리 라이브러리이다. Flux 아키텍처 의 영향을 받아 프론트 엔드에서의 데이터 관리를 쉽고 견고하게 해준다. Store ：상태를 관리하는 곳 즉 저장소 Reducer ：상태를 변화 시키는 곳 , 즉 변수를 저장하는곳 Actions ：상태를 변화시키는 함수 , 이름처럼 뭔가 액션을 취하는곳 리액트에서 리덕스를 사용하려면 redux와 react-redux를 설치해야 한다. 또한 액션 생성 함수를 작성할 수 있도록 하기 위해 추가적으로 redux-thunk를 설치해야 한다. 상태 ? 상태 영어로 state. state는 유동적으로 변할 수 있는 데이터를 의미한다. 리덕스에서 사용되는 키워드 ? 액션 .. 2023. 3. 17. [React] Link 페이지 이동 시 스크롤 맨 위로 오게 하기 React로 웹을 만들다 발견한 문제가 있었다. 그것은 Link to로 화면 전환을 할 때 Link to가 있는 버튼이 아래에 있으면 화면 전환시에도 그 위치인 아래로 이동하였다. 상단으로 페이지 이동이 되어야 하는데 버튼 누른 위치 그대로 넘어가기 때문에 UX상 좋지 않아 해결이 필요했다. 더보기 UX는 사용자 경험의 약자로, 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미한다. 스크롤 컴포넌트를 만들고 컴포넌트를 index.js에 선언하여 문제를 해결하였다. index.js의 Router 안에 선언해야 pathname을 인식하므로 Router 안에 선언하였다. ScrollToTop.js 생성 index.js 이렇게 적용시키면 페이지 이동하여 화면 전환 시 스크롤이 .. 2023. 3. 15. [React] 리액트 Swiper 사용하기 (리액트 터치 슬라이드) Swiper ? 우리들은 슬라이드를 만들 때 라이브러리를 많이 사용한다. 그 중 터치 슬라이드가 되는 라이브러리가 Swiper 이다. 적용하는 법 1. Swiper 설치 //terminal npm i swiper swiper npm을 설치한다. 2. 스와이퍼 슬라이드 사이트 : https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 3. Get Started 클릭 --> React 연결하기 4. 상단 Demos.. 2023. 3. 11. [React] 이벤트 핸들러 - 리액트에서 이벤트 처리하는 방법 DOM에서 클릭 이벤트를 사용할 땐 버튼이 눌리면 activate()라는 함수를 호출하도록 하고 DOM 클릭 이벤트를 처리할 함수를 onclick을 통해서 전달했었다. 또리짱 리액트의 이벤트 처리는 DOM의 이벤트와 다른 부분이 두 가지 있다. 1. 이벤트 이름을 카멜 표기법으로 쓴다. 더보기 카멜표기법 단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기한다. 합성한 단어의 모양이 쌍봉낙타의 등과 비슷하다는 뜻에서 이름붙었다. 2. DOM에서는 이벤트를 처리할 함수를 문자열로 전달하지만 리액트에서는 함수 그대로 전달한다. 리액트 이벤트 처리 또리짱 위 코드처럼 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있는데 이것을 이벤트 핸들러라고 한다. 이벤.. 2023. 3. 1. [React] 리액트 훅스-useRef() useRef useRef() 훅은 레퍼런스(Reference)를 사용하기 위한 훅이다. 리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미한다. useRef() 훅은 레퍼런스 객체를 반환한다. 레퍼런스 객체엔 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미한다. const refContainer = useRef(초깃값); useRef()훅은 변경 가능한.current라는 속성을 가진 하나의 상자이다. useRef() 훅은 매번 렌더링될 때마다 항상 같은 ref 객체를 반환한다. useRef() 훅은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다. .current 속성을 변경하는 것은 재렌더링을 일으키지 않는다. 따라서 ref에 DOM node가 .. 2023. 2. 27. [React] 리액트 훅스 - useEffect() useEffect ? useState()와 같이 가장 많이 사용되는 훅으로 useEffect()가 있다. useEffect는 사이드 이펙트를 수행하기 위한 훅이다. 리액트에서 말하는 사이트 이펙트는 그냥 효과를 뜻하는 이펙트의 의미에 가깝다. 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미한다. 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료될 수 없기 때문이다. 렌더링이 끝난 이후에 실행되어야 하는 작업이다. useEffect()는 아래와 같이 사용한다. useEffect(이펙트 함수, 의존성 배열); 첫 번째 파라미터로는 이펙트 함수가 들어가고, 두 번째 파라미터로는 의존성 배열이 들어간다. 의존성 배열은 말.. 2023. 2. 26. [React] 리액트 훅스 - useMemo(), useCallback() useMemo ? Memoized value를 리턴하는 훅이다. 파라미터로 Memoized value를 생성하는 create 함수와 의존성 배열을 받는다. 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수를 호출하여 결괏값을 반환하며, 그렇지 않은 경우에는 기존 함수의 결괏값을 그대로 반환한다. useMemo() 훅을 사용하면 컴포넌트가 다시 렌더링될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있다. 필요할 때만 계산을 하지않고 메모리에서 꺼내서 재사용 하는 기법. 자주 필요한 값을 처음 계산할 때 캐시에 저장을 해두어 값이 필요할 때마다 다시 계산하지 않고 캐시에서 꺼내서 재사용. useMemo는 의존성이 변경되었을 때만 변경된다. const memoizedValue = u.. 2023. 2. 25. 이전 1 2 3 4 다음 728x90
