post-thumbnail

[developic] react radio button custom hook 만들기

프로젝트 내에서 중복적으로 사용되고 있는 라디오버튼 요소가 있었다. 라이브러리를 이용해 쉽게 다루는 방법도 있지만, 커스텀 훅 연습용으로 라디오버튼 커스텀 훅을 직접 만들어보기로 했다. 먼저 공통으로 요구되는 props는 다음과 같았다.

2021년 8월 20일
·
0개의 댓글
post-thumbnail

[developic] 드롭다운, 외부 클릭 감지 기능 custom hook 구현

드롭다운(Dropdown)에 필요한 기능은 다음과 같다. - 드롭다운 형식으로 목록 출력하기 - 배경이나, 해당 요소 외 다른 요소를 클릭하면 닫히게 만들기 먼저 목록을 출력하는 드롭다운 컴포넌트의 경우 일단 검색 정렬, 기간 필터링 기능에서부터 중복 사용

2021년 6월 2일
·
0개의 댓글
post-thumbnail

[react] Redux Toolkit 튜토리얼

redux-toolkit 공식 문서 튜토리얼 내용을 개인 학습용으로 정리한 글입니다. Redux Toolkit은 Redux를 사용하기 쉽게 만들기 위해 Redux 팀에서 공식으로 제공하는 개발도구 입니다. Redux Toolkit은 Redux에 대한 세 가지 일반적인

2021년 4월 27일
·
0개의 댓글
post-thumbnail

[Wikea] 제품과 디지털 쇼룸 이미지 데이터 다르게 불러오기

listHeader의 제품과 디지털쇼룸 클릭 시, 불러오는 이미지 데이터를 변경하도록 구현했다. 제품 이미지가 기본값이며 디지털 쇼룸에 해당하는 이미지가 없으면 일반 제품 이미지를 보여준다.

2021년 2월 3일
·
0개의 댓글
post-thumbnail

[Wikea] 카테고리 별 상품 목록 불러오기

useEffect 훅을 이용해 쿼리에 저장한 카테고리 값이 변경되면 카테고리 아이디를 파라미터로 넘겨 getList thunk 함수를 디스패치해 서버로 API를 요청하고, 리스트 데이터를 받아온다.

2021년 2월 3일
·
0개의 댓글
post-thumbnail

[Wikea] react-slick으로 Carousel 만들기

내가 맡은 이케아 웹사이트의 메인 페이지에서 진행중인 이벤트 및 프로모션, 추천제품, 신제품을 보여주는 컴포넌트를 캐러셀 형식으로 구현해야 했다. 직접 만드는 방식과 라이브러리를 이용하는 방식 중 고민한 결과, 이전까지 라이브러리를 활용해본 적이 없어 라이브러리를 실전

2021년 2월 3일
·
0개의 댓글
post-thumbnail

[React] 리덕스로 Counter, ToDoList 구현 (1)

1) 프로젝트 생성 $ npx create-react-app learn-redux2) redux 라이브러리 설치 $ cd learn-redux $ yarn add redux

2021년 1월 21일
·
0개의 댓글
post-thumbnail

[React] redux

React는 React 컴포넌트 자신이 개별적으로 상태관리를 한다.React+Redux는 상태관리를 하는 전용 장소(store)에서 상태를 관리하고, React 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다.Store 및 Store에 존재하는 State는 아주 신성한

2021년 1월 21일
·
0개의 댓글
post-thumbnail

[React] 커스텀 Hook

컴포넌트를 만들다 보면 반복되는 로직이 발생한다. ex. input 관리 이런 경우 커스텀 Hooks를 만들어서 반복되는 로직을 재사용할 수 있다. useInputs.js 만든 useInputs Hook을 App.js에서 사용하기 App.js

2021년 1월 18일
·
0개의 댓글
post-thumbnail

[React] useReducer

이전에는 useState를 사용해서 상태를 업데이트 해주었는데, useReducer hook을 사용해서 상태 업데이트도 가능하다. 리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 useState 함수이다. 그러나 좀 더 복잡한 상태 관리가

2021년 1월 18일
·
0개의 댓글
post-thumbnail

[React] useMemo, useCallback

성능 최적화를 위해 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법useMemo: 특정값이 바뀌었을 때만 특정 함수를 실행해서 연산하도록 처리첫번째 파라미터로 어떻게 연산할지 정의하는 함수, 두번째 파라미터로 deps 배열을 넣어준다. 이 배열 안에

2021년 1월 18일
·
0개의 댓글
post-thumbnail

[React] useEffect

useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수

2021년 1월 18일
·
0개의 댓글
post-thumbnail

[React] 배열 +

CreateUser.js상태 관리를 부모 컴포넌트인 App에서 하게 하고, input의 값 및 이벤트로 등록할 함수들을 props로 넘겨받아서 사용한다. App.js배열을 변화시킬 때도 객체와 마찬가지로 불변성을 지켜주어야 하기 때문에, 배열의 push, splice,

2021년 1월 18일
·
0개의 댓글
post-thumbnail

[React] 배열 렌더링

(1) 중복되는 코드가 발생하기 때문에 비효율적이다. 컴포넌트를 재사용할 수 있게 만들어준다. (2)배열이 고정적이라면 상관 없지만, 만약 배열의 내용이 동적이라면 렌더링하지 못한다. 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열의 내장함수 map() 을 사용한다

2021년 1월 17일
·
0개의 댓글
post-thumbnail

[React] useRef

html과 js를 사용할 때에는 특정 DOM을 선택해야하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택했다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 일이 발생하는데, 그럴

2021년 1월 17일
·
0개의 댓글
post-thumbnail

[React] Input 상태 관리

input 에 입력하는 값이 하단에 나타나고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현input의 onChange 이벤트 이벤트 객체 e : 수정 이벤트가 발생할 때 내용을 파라미터로 받아와 사용할 수 있다. 객체 안에 있는 e.target은 현재 이벤

2021년 1월 16일
·
0개의 댓글
post-thumbnail

[React] useState를 통한 동적 상태 관리

컴포넌트를 통해 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 구현하는 방법에 대하여 알아본다. useState 함수는 hooks 중 하나 버튼 클릭 시 함수 실행 주의할 점: 클릭이 됐을 때(이벤트가 발생할 때) 함수를 호출 시켜야 하기 때문에

2021년 1월 16일
·
0개의 댓글
post-thumbnail

[React] props & component

props : properties의 약자어떤 값을 컴포넌트에게 전달해줘야 할 때 사용Hello 컴포넌트에서 name값을 사용하고 싶다면 props를 파라미터 형태로 전달한다. 넘어온 props는 객체 형태로 전달되며, {props.name}과 같은 형식으로 조회한다.

2021년 1월 16일
·
0개의 댓글
post-thumbnail

[React] React Intro

벨로퍼트와 함께하는 모던 리액트 강의를 바탕으로 내용 정리 DOM(Document Object Model)이란, 각 HTML 엘리먼트에 대한 정보를 지니고 있는 자바스크립트 객체이다. 우리는 웹 페이지의 내용을 동적으로 변경하고자 할 때마다 DOM을 수정한다.DOM 을

2021년 1월 16일
·
0개의 댓글