React

브라우저를 열고 사이트에 들어가면 보여지는 것(UI) 와 할 수 있는 것(UX)이 굉장히 많습니다.이러한 이유로 요새는 웹 페이지라는 단어보다 웹 애플리케이션이라는 단어가 많이 사용되곤 합니다.이처럼 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는

리액트의 컴포넌트에서는 동적인 값을 상태(state)라고 부릅니다. 리액트에서는 리렌더링을 위한 조건으로 여러 가지가 있는데 그 중 하나가 상태값 변경입니다. 리액트에서는 useState라는 훅을 통해 컴포넌트에서 상태를 관리할 수 있습니다.const count, se

실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 만들어 본 샘플 데이터를 말합니다프론트엔드 개발을 진행하려는데 필요한 백엔드 API가 완성이 안되었을 경우이 경우에는 백엔드에서 받아올 데이터 구조와 유사한 mock data를 만들어 데이터에 맞게

코드리뷰를 받던 중 리액트의 조건부 렌더링을 단편적으로만 이해한 것 같아 정리할 위해 글을 남깁니다.이번에 인스타그램 로그인 페이지를 구현할 당시 input 값이 변경될 때마다 onKeyUp 이벤트를 통해 유효성 검사를 하도록 했습니다.위와 같은 방법은 이메일 inpu

리액트에서 화면이동을 위해 사용하는 두 가지 방법과 두 방법의 차이점에 대해 알아보도록 하겠습니다!라이브러리 설치Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.클릭 시 바로 이동하는 로직 구현 시에 사용 용이re

동적 라우팅이란 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 의미합니다. 보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성되는데, 이

route 에서 props 받기

react-slick 라이브러리는 React Carousel을 사용하기 쉽게 라이브러리화 시킨것을 의미합니다.실제로 react만을 이용해 carousel을 만들경우, 하단에 무한 carousel 이나 하단에 dot 등 고려해야 할 것이 많기 때문에 사용법만 안다면 훨씬

url에 해당 필터링에 대한 정보를 표시하기 위해 필터링된 정보를 따로 빼내는 함수를 작성하고 productlist path 뒤쪽에 붙여서 url 이동을 했습니다.