본문 바로가기

React128

React(95) 리스트 더보기 기능 구현 오늘은 리스트 더보기 기능을 구현해보자 맨 처음에 아이템이 다섯 개만 보이는 리스트가 있다. [더보기] 버튼을 누르면 그 다음 5개를 더 불려오고 마지막 리스트가 나올 때까지 다섯 개씩 불려온다. 다 불러오게 되면 [접기] 버튼이 나오고 맨 처음 5개만 보이는 초기상태로 돌아가게 된다. 이것을 구현하기 위해서는 두가지 방법이 있다. 1. 더보기를 누를때마다 getList api 를 호출하여 부분적으로 받아오는 방법이 있고, 2. 처음에 getList api 를 호출하여 한꺼번에 받아온 배열을 프론트에서 보여주는 방법이다. 각각에 맞는 방법이 있겠지만, 나는 1번을 더 선호한다. 처음에 한꺼번에 전체 배열을 불러온다면 메모리를 그만큼 차지하게 되고, 만약 몇 만 건있는 데이터 배열이라면 과부하가 걸릴 수 .. 2023. 4. 25.
React(94) useState 알아보기 (공식문서정리) updated 03/09/23 리액트에서 상태(state) 값은 매우매우 중요하다. 화면에서 일어나는 모든 변화들은 변수(state) 안에 담아서 표현될 수 있고, 업데이트도 자주 일어나기 때문에 렌더링(a.k.a 새로고침) 되면서 항상 최신 데이터(a.k.a state)를 유지해야 한다. 너무너무 기본이지만 확실히 알고 넘어가고자 공식문서를 참고하여 한번 더 정리해보았다. React(93) useState 알아보기 (공식문서정리) useState 는 리액트 내장 함수이고, state 를 나타내는 변수로 사용할 수 있다. useState 는 리액트 훅이기 때문에 컴포넌트 최상단에서 호출하여야 한다. 조건문이나 반복문에서의 사용은 안된다. (strict 모드에서는 pure func 인지 검사을 위해 2번 .. 2023. 2. 21.
React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기 유사 객체 배열은 {객체 안에 {객체} 들이 배열} 처럼 들어있는 객체 형식을 말한다. 배열과 유사객체배열의 차이는 Array 와 Object 의 차이와 같다. 배열은 순서가 있으며, index 로 요소를 찾는다. 유사객체배열은 순서가 없으며, key 로 요소를 찾는다. 순서가 있고 없고의 차이는 크다. 배열은 메모리에서 연속된 공간을 할당 받는다. 그래서 맨 앞에 요소를 추가한다면 배열의 요소들은 순서대로 한 칸씩 옆으로 옮겨야만 한다. 객체는 메모리에 할당될 때 객체의 값에 참조 값을 통해 접근한다. 그렇기 때문에 순서를 가진 것 같이 나열해놔도 각자 주소가 다르다. 그래서 동적으로 생성되는 데이터의 경우 배열보다는 객체 형식으로 표현하는게 성능 상 더 좋다. 자 그럼 유사객체배열에서 원하는 값을 핸.. 2023. 2. 16.
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.
반응형

티스토리툴바