리액트 (22) 썸네일형 리스트형 [React] 리액트 캐러셀 라이브러리 react-slick 사용 해보기 메인페이지에 있는 캐러셀 컴포넌트를 만들게 되었다. 직접 만들까, 라이브러리를 사용할까 하다가 좋은 건 가져다 쓰라고 있는거니까... 하며 구글링 끝에 쉽게 캐러셀 컴포넌트를 만들 수 있는 라이브러리를 찾게 되었다! react-slick이라는 이름의 라이브러리며, 사용법이 상당히 간단하며 종류도 다양하다. 나는 Lazy Load를 선택했다. 1. 설치 $ npm install react-slick --save-dev // 라이브러리 설치 $ npm install slick-carousel --save-dev // css 설치 2. 원하는 캐러셀 고르기 https://react-slick.neostack.com/docs/example/lazy-load Neostack The last react carous.. [ESLint&Prettier] React CRA 후 ESLint & Prettier 설정하기(feat. javascript) 지금까지 팀 프로젝트 또는 개인 프로젝트에서 내가 ESLint 및 Prettier 등의 초기 세팅을 진행해본 적이 없었다. 이번 프로젝트 '나무'는 스터디원분과 함께 총 2인으로 구성된 팀 프로젝트인 만큼 서로가 할 수 있는, 해보고 싶은 최대한의 다양한 경험을 하기로 했다. 우리 하고 싶은거 다 해~ 나의 첫 미션은 나무 프로젝트의 프로젝트 초기 세팅(CRA + ESLint + Prettier)이다. ESLint와 Prettier는 협업을 위해 꼭 필요한 존재이다. 각자의 코딩 스타일이 다르기에 이러한 도구들을 사용해 우리의 프로젝트에 하나의 일관된 규칙을 적용해줄 수 있다. 먼저 ESLint와 Prettier가 무엇인지 간략하게 정리하고 넘어가자. ESLint와 같은 Linter 는 소스 코드에 문제.. [react] forwardRef stackoverflow 클론 코딩 프로젝트를 진행하던 중이였다. 질문 등록 페이지를 만들며 input 또는 editor가 focus 될 경우 해당 컴포넌트로 스크롤될 수 있도록 하는 기능을 만들고 싶었다. 그래서 질문 양식에 따라 input 또는 editor 컴포넌트가 담긴 각각의 custom component에 ref를 주어 각 컴포넌트들이 focus됨에 따라 참조되어 스크롤이 해당 컴포넌트로 이동할 수 있도록 해야겠다~~ 싶었는데 왠걸!! 스크롤 이벤트가 전혀 일어나지 않는 것이였다! 그때 당시에는 이유를 찾지못하고 각 custom component를 div 태그로 감싸 그 div에 ref를 주는 것으로 땜빵(?) 해결을 하였고, 여러가지 구글링을 해보았지만 문제 자체를 파악하지 못해 제대로 된 검.. [react] context API context API란? props drilling을 사용하기 싫을 때, 즉 컴포넌트에 상관없이 전역적으로 데이터를 이용하고 싶을 때 사용한다. context API 사용 시 전역 데이터를 Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다. 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등등 다양하게 컴포넌트 간 공유되어야 할 데이터로 사용하면 좋다. context API를 사용하고 싶을 때에는 context, provider, consumer 이 세 가지 개념만 숙지하면 된다. 1. Context(전역 값 저장) Context 를 만들 땐 다음과 같이 React.createContext() 라는 함수를 사용한다. // context.js imp.. [react] useReducer(feat. useState와 비교) useReducer React(리액트)에서는 useReducer란 훅(Hook)을 제공하는데, 이 reducer(리듀서)로 상태 관리(state management)를 할 수 있다. useState와 비슷하지만 가령 두 개의 상태가 컴바인 되어 관리되어야 할 경우 같은(아이디 상태 값, 아이디 유효성 검사 통과 여부 상태 값) 조금 더 복잡한 상태 관리가 필요할 때 사용할 수 있다. useReducer 문법은 간단하다. reducer(리듀서) 함수와 initialState(초기 상태)를 전달하면 useReducer라는 훅(Hook)이 새로운 상태(state)와 dispatch(디스패치)함수를 리턴해준다. const [state, dispatchFn] = useReducer(reducerFn, initia.. [react] useEffect에서 Clean-up 함수 사용하기 Debouncing : 연이어 발생한 이벤트를 하나로 묶어 처리하는 방식 onChange 이벤트를 통해 입력값에 대한 유효성 검사를 하다 보면 값을 입력할 때마다 상태를 변경하는 경우가 생긴다. 상태가 변경될 때마다 화면이 리렌더링 되거나, 처리 로직을 재수행 하는 경우 과부하가 생길 수 있으므로 디바운싱을 통해 그룹 단위로 이벤트를 처리해보자. 아래는 로그인 시 id/pw입력 값 유효성 검사 로직이다. [디바운싱 전] const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) 입력값 저장 const [emailIsValid, setEmailIsValid] = useState(); //패스워드 입력값 저장 const [formIsValid, set.. [react] 제어 컴포넌트 vs 비제어 컴포넌트 제어 컴포넌트와 비제어 컴포넌트의 개념 및 차이, 어떤 상황에서 사용해야 하는지에 대해 간략하게 정리해 보자. 제어 컴포넌트 아래의 코드는 input 태그의 value가 바뀔 때마다 onChange 함수를 통해 state가 업데이트되는 로직이다. export default function App() { const [name, setName] = useState(""); const onChange = (e) => { setName(e.target.value); }; return ( ); } 제어 컴포넌트 방식은 사용자의 입력을 기반으로 state를 관리하는 방식을 말한다. setState 함수를 사용하여 값을 관리하는 방식(React에 의해 값이 제어되는 방식)을 제어 컴포넌트 방식이라고 생각하면 편하다... [react & typescript] 무한스크롤 구현하기(feat. 팀원 분) 도메인 페이지에 나오는 '오늘의 맛포스트' 컨테이너를 무한 스크롤로 구현한 부분을 정리해보자. 도메인의 ui나 데이터 실시간 렌더링 등은 내가 맡아서 하였지만 무한 스크롤 기능은 다른 팀원분이 하셔서 프로젝트 종료 이후 코드를 보고 구글링을 해가며 따로 공부했다. 왠지 무한 스크롤은 나중에 분명 다시 찾을 일이 있을 것 같기 때문에! 이번 기회에 정리를 해보자! :) 먼저 무한 스크롤을 구현하기 위해 알아야 할 개념에 대해 간단히 짚고 넘어가자. clientHeight 현재 화면에서 보이는 높이라고 생각하면 편하다. scrollHeight 스크롤을 포함한 전체 요소의 높이를 말한다. 스크롤이 생겨서 뷰포트에 보이지 않는 아래의 요소들의 높이까지 전부 포함한다. scrollTop top 속성이므로 세로의 .. 이전 1 2 3 다음
