본문 바로가기

React125

React(92) useRef 알아보기 (공식문서 정리) 요즘은 공식문서 읽기에 재미가 붙었다. 리액트 beta 공식문서를 통해 기본적인 훅들과 기능들을 다시한번 훑어보며 정리 중이다. 오늘은 useRef 에 대해서 읽어보았다. 그러다 추억의 포스팅도 발견했다. 2년 전쯤 정리했던 포스팅인데 정말 무지했음을 다시 한번 느꼈다. (화이팅🥲) React(27) 리액트 훅 useRef 란 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 us devbirdfeet.tistory.com React(92) useRef 알아보기 (공식문서 정리) useRef 는 렌더링이 필요하지 .. 2023. 2. 1.
React(91) 탭 클릭시 지정 영역으로 스크롤 이동 / 스크롤시 해당 탭 자동선택 이 녀석은 반응형 탭에 대한 고민의 흔적이 담긴 꽤 오래 묵혀놓은 포스팅이다. 재작년에 짰던 코드라 부족할 수 있지만 최대한 고쳐 올려보겠다. 상품 판매 페이지의 중간에 메뉴 탭이 붙게 되는데, 이 메뉴를 클릭시 해당 내용이 있는 곳으로 스크롤이 이동한다. 또한 그냥 스크롤 다운 하다가 해당 영역이 있는 지점에 들어서면 이번엔 반대로 탭이 해당 메뉴로 이동한다. 그럼 구현하러 가보자 ! React(91) 탭 클릭시 지정영역으로 스크롤 이동 / 스크롤시 해당 탭 자동선택 아래 상품 상세 페이지에는 포트폴리오라는 탭이 보인다. 이 탭을 클릭해보자 요렇게 스크롤이 딱 포트폴리오를 설명하는 부분으로 이동한다. 반대의 경우도 마찬가지이다. 포트폴리오를 설명하는 부분으로 스크롤을 내리다보면 해당 영역으로 진입하면 .. 2023. 1. 25.
React(90) useEffect 알아보기 (공식문서 정리) React 를 만지면서 useEffect 는 사실 1년 이상을 동거동락해왔다. 하지만 처음 강의를 들을 때 공부하거나 실무에서 그때그때 얻은 조각난 지식말고는 제대로 아는 게 없다는 것을 깨닫고 부끄러웠다. 그래서 리액트 공식문서 구버전과 신버전(beta) 을 참고하여 useEffect 에 대해서 조각난 퍼즐을 맞춰 정리해보았다. React(90) useEffect 에 대해서 (공식문서 정리) useEffect 는 리액트 16.8 에서 도입된 Hook(리액트의 내장함수)이다. 코드를 짜다보면 화면이 새로고침되거나(렌더링) 데이터가 뭐가 바뀔 때(업데이트), 어떤 함수가 실행되야 할 때가 있다. 얘는 그런 needs 가 탄생시킨 함수이다. side effects 는 렌더 후에 일어나는 코드의 실행을 말하고.. 2023. 1. 19.
React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) 게시글 작성 시간을 현재시간 기준으로 표시해주는 유틸성 함수를 만들어 보려고 한다 moment.js 라이브러리를 활용하면 아 - 주 간편하게 시간계산함수를 만들수있다 그럼 몇 분 전, 몇 시간 전, 몇 일 전 을 표시하는 함수를 만들어보자 결과화면 미리보기 React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) Date 객체로 작성시간을 매개변수로 받아오자 today 날짜를 구한뒤 diff 내장함수로 day, hour, minute 의 차이를 구하면 된다. export const getDayMinuteCounter = (date?: Date): number | string => { if (!date) { return ''; } const today = moment(); const pos.. 2022. 12. 28.
React 실행오류 - rendered fewer hooks than expected (feat. Hook의 규칙) 어느날 새발자는 커스텀 훅을 만들다가 다음 메시지와 에러를 만나게 되었다. rendered fewer hooks than expected. this may be caused by an accidental early return 원인은 훅의 규칙를 몰랐던 것에서 비롯되었다. → 반복문 / 조건문 / useEffect 등 에서는 사용을 하면 안되고, 리액트 컴포넌트 내에서만 호출해야 된다. React 실행 오류 - rendered fewer hooks than expected. this may be caused by an accidental early return (feat. Hook의 규칙) 훅(Hook) 이라는 개념은 처음에는 어렵고 생소했지만 리액트 형식으로 포장된 커스텀 함수 정도로 이해를 하고 사용.. 2022. 11. 30.
React(88) KST 에서 UTC 로 시작일/종료일 변환하기 (feat.moment) Updated 12/27/22 시작일과 종료일이 표시된 캘린더 컴포넌트가 있다. 당연히 유저입장에서는 한국시간(KST)으로 표기된다. 하지만 데이터를 넘길때는 UTC(국제표준시간)으로 변환해주어야 한다. 자 그럼 변환하려 가보자! (기본적인 지식으로 KST = UTC + 9시간 이라는 것을 기억하자) React(88) KST 에서 UTC 로 시작일/종료일 변환하기 (feat.moment) 자, 유저가 선택한 시작일과 종료일이다. 서버로 넘기는 결과일은 아래와 같이 UTC 로 변경되어야 한다. 특히 종료일은 선택한 날짜인 11 / 3 일(KST 기준) 의 23: 59: 59 초 까지로 표기 되어야 한다. (서버에서는 일(Date)까지가 아닌 시간(Time)까지도 보내줘야 하기 때문이다.) moment 라이.. 2022. 11. 17.
React(87) 여러 버튼 중 하나 클릭시 색상변경하기 여러 버튼이 있을 때, 하나만 클릭하면 색상이 변하게 만들어보자 워낙 비슷한 요구사항들이 많기 때문에 그동안 비슷한 포스팅도 여럿 올린 것 같다. 하지만 과신과 방심은 금물이다 예전포스팅보다 조금 더 리팩토링된 코드로 다시한번 복습해보자 :) React(87) 여러 버튼 중 하나 클릭시 색상변경하기 새발컴퍼니 회원모집 모달창이 있다. 세가지 회원 타입이 있는데 하나를 선택해서 클릭하면 색상이 변경된다고 해보자 과거의 새발자가 작성했던 방식은 타입과 타이틀이 분리되어 HTML 태그에서 합쳐서 보여주는 방식이였다. 지금의 새발자는 객체형식으로 따로 노는 { 타입과 타이틀 } 을 묶어보았다. const items = [ { type: 'general', title: '일반 회원 가입하기', }, { type:.. 2022. 11. 7.
React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 상품 판매를 위해서 필터기능은 소중하다. 유저에게 편리한 경험을 제공해줄 수 있기 때문이다. 아래에서 구현하는 필터기능은 순전히 프론트 위주이다. 선택한 필터에서 값을 추출하는 단계까지만 구현한 코드이다. API의 메소드와 쿼리는 각각마다 다르기 때문에 api를 사용하기 직전까지만 응용가능한 정도로 정리해보았다. 자, 그럼 시작해보자 결과화면 미리보기 React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 CategoryFilter.tsx 일단 준비물로 타입선언부터 해주자 interface Category { name: string; state: string; } 필요한 변수를 준비물로 선언해주자. // 요 카테고리 아이템들 속에는 { 이름과 상태 } 값들이 들어있다 const category = [.. 2022. 10. 31.
React(85) React-Query - useQuery 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다. 가장 기본적인 사용법을 익혀보도록 하자 Create, Update, Delete 에서는 React-Query 를 어떻게 사용하는지 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(84) React-Query - useMutation 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 create 와 update, delete 를 하기 위해서는 useMutation() 을 사용해야 한다. 이미 실무에서는 내부 api용 라이브러리와 커스텀 훅을 만들어 useMutation 을 사용하.. devbirdfeet.tistory.com React(85) React-Query .. 2022. 10. 11.
반응형

티스토리툴바