이번 포스팅은 지난 회원가입 폼에 커스텀 훅을 넣어본 것과 같이 투두리스트에도 커스텀 훅을 적용해보기로 했다. 커스텀 훅에 대한 이야기와 왜 이러한 작업과 포스팅을 하는지는 지난 커스텀 훅 포스팅을 읽으면 될 것 같다. 회원가입 폼에 커스텀 훅 넣어보기 이번 포스팅은 어느 회사에서 과제테스트든 실무에서든 회원가입폼을 검색없이 멋지게 만들어보라고 했을 때 '내가 과연 어디까지 리팩토링 해가며 멋지게 만들어볼 수 있을까?' 하는 생각이 jhbljs92.tistory.com 그럼 어떻게 작성하고 리팩토링을 진행했는지 적어보겠습니다. 이번 투두리스트도 마찬가지로 css에 대한 연습이 아니였기 때문에 매우매우 안이쁜점은 감안해주세여. 1. 분리없는 기본적인 코드 import { useEffect, useState..
이번 포스팅은 어느 회사에서 과제테스트든 실무에서든 회원가입폼을 검색없이 멋지게 만들어보라고 했을 때 '내가 과연 어디까지 리팩토링 해가며 멋지게 만들어볼 수 있을까?' 하는 생각이 들어, 마침 비즈니스 로직 분리 (커스텀 훅 패턴)에 대해서 공부도 할 겸 미래의 입사테스트도 공부할 겸 겸사겸사 커스텀 훅을 활용한 회원가입폼과 투두리스트를 만들어서 포스팅을 해볼 생각이다. 이런걸 왜하냐 생각할 수도있지만 기본코드부터 시작해서 커스텀 훅 패턴을 검색없이 손에 익히기 위해서는 간단한것부터 적용해보는 것도 좋을 것 같다고 생각했다. 제 코드가 완벽하게 만들어진 것이 아닐테니 보완부분은 댓글로 알려주셔도 감사합니다 :) 커스텀 훅? 리액트 공식문서 상에서 커스텀 훅의 핵심 키워드는 반복되는 로직이다. 리액트 공..
여러가지 웹사이트(커머스, OTT 등)를 둘러보다 보면 Slider 형태의 기능을 쉽게 볼 수 있다. 그냥 너무나 쉽게 찾아볼 수 있습니다. 우리는 보통 슬라이드라고 불러왔지만, 사실 정식용어는 캐러셀(Carousel)이라고 한대요. 뜻은 회전목마라고 하는데.. 뭐 그렇대요. 대충 뭔느낌인지 아실거라고 생각해요. 이러한 기능을 직접구현하는 방법도 있지만, 라이브러리를 통해 쉽게 구현할 수도 있습니다. 직접 구현하기 위해서는 캐러셀의 모든 컨텐츠를 하나의 container에 담고 overflow를 hidden속성을 주어서 container밖의 컨텐츠를 가려줍니다. 그러고 좌, 우 버튼을 만들어서 클릭시 컨텐츠의 margin-left에 음수,양수값을 더해주어 이동시켜줄 거리만큼 당겨주면 옮겨지는거처럼 보이겠..
오늘은 과제로 React Hooks를 적용해보고, Custom Hook과 React.lazy()와 Suspense를 이용하여 React앱을 리팩토링을 해보았다. 구현해야할 것 json-server 라이브러리 사용 위의 과제에서 데이터로 사용할 것들은 서버를 구축할 필요없이 json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리인 json-server 라이브러리를 사용했다. json-server는 다른 앱을 만들어볼때도 사용해보았던 기억이 있고, 그때 났었던 에러들을 깃헙 readme에 기록을 해놓은 것이 있어서 에러를 그것을 토대로 잡을 수 있었다. GitHub - plla2/React-crud: 📃 react + JSON-server 고용자들의 정보 확인,추가,삭제를 할 수 있다, db...
이번 포스팅에서는 리액트에서 전역상태를 관리할 때 많이 사용하는 Context API 와 Redux의 사용법과 장단점을 써보려고한다. 먼저, Redux는 먼저 찍먹을 해보았었다. '프론트엔드/Redux' 카테고리의 글 목록 프론트엔드 개발자가 되고픈 개미의 일대기 🐜 jhbljs92.tistory.com 일단, 전역 상태 관리는 언제할까?? 지겹도록 사용했던 useState는 지역 상태를 관리했었다. 이는 사용하는 컴포넌트 안 또는 props로 전달할때는 하위 컴포넌트에서 사용했었다. 하지만 이렇게 props로 하나씩 계속 내려주고 하기에는 한계가 있었다. 즉, 다른컴포넌트에게 props를 사용하지않고 데이터를 넘겨주고싶었던 것이다. 이때 사용했던 전역상태 관리도구가 Redux, ContextAPI 등이..
총 3번에 걸쳐 리액트 Hook에 대해 알아보고 문제를 풀어보았다. 이번에 풀어본 useReducer는 리덕스를 먼저 한번 봐보고 풀어서 그런지 마지막 3번문제를 제외하고는 풀만 하였다. 하지만 아직까지 dispatch, reducer, useReducer에 각각 어떤 인자를 주어야하는지 헷갈린다. 이 개념은 리덕스에서까지도 계속 쓰이니 헷갈리지않게 계속 반복해서 완벽히 알아보도록하자. 문제 1. useReducer()를 이용하여 다음과 같은 결과를 출력하는 코드를 작성하세요. 1번 코드 풀이 useReducer 함수에 넣을 reducer인 priceReducer를 선언해준다. useReducer를 이용한 state를 0으로 초기화해준다. 클릭했을 때 dispatch 함수를 실행할 함수를 선언해준다. (..
저번 state와 event 문제 실습에 이어서 리액트의 주요 hook인 useState, useEffect, useRef 훅을 실습해보는 문제를 풀어보았다. useEffect를 잘못 사용하여 무한렌더링이 되는 문제점을 찾아서 따로 useEffect를 사용할 때, 이러한 실수를 하지 않도록 알아보았다. 또한, useRef를 통해 리렌더링이 되지 않아도 되는 부분이 리렌더링이 되는것을 막을 수 있다. 문제 1. useState()를 사용하여 다음과 같은 결과가 출력되도록 해보시오. 1번 코드 풀이 먼저, 변수를 저장할 상태 eating을 초기화. input에서 onChange 이벤트가 발생할 때 value값을 담을 상태 value를 초기화. inputHandler 함수를 정의. input에서 onChang..
오늘은 state와 event를 실습해볼 수 있는 문제를 풀어보았다. 이번 문제들을 풀어봄으로써 useState의 사용법, 부모 컴포넌트에서 자식 컴포넌트로 props를 넘겨주기, onClick, onChange 등과 같은 이벤트주는방법 등을 더 확실히 알 수 있던 계기가 되었다. 1번 1번 문제는 비교적 간단하였다. state와 이벤트를 이용하여 아래와 같이 출력이 되게 하면되었다. 1번 코드 풀이 먼저, 클릭횟수를 저장하기 위해 counter 상태값을 만들어준다. 클릭이라는 버튼을 클릭하면 counter가 1이 증가하도록 하는 increase라는 함수를 만들어준다. increase함수에는 상태변경함수인 setCounter를 통해 상태 counter에 변화(counter+1)를 주었다. 버튼 밖으로 커..
