[React(or Next.Js)-Typescript]

file 타입의 input은 브라우저 내에서 디자인이 고정으로 적용되어 있기 때문에,css로 별도의 스타일링을 할 수 없게 되는 문제가 발생한다. 이는 button을 하나 만들어주고, useRef훅을 이용해서 button과 input을연결해주는 것으로 아주 간단하게 해

Side컴포넌트에서 tab 메뉴를 만들었다. 나는 그 탭을 클릭하여 선택할 것이고, 선택된 tab의 id를 이용해서 컴포넌트를 조건부 렌더링 하려고 한다. 이때 조건부 렌더링이 Side 컴포넌트의 내부에서 일어난다면 useState 훅을 이용해서 간단하게 해결해 줄 수

각각의 배열의 길이가 다른 상황. 내부의 데이터들이 많아지면 컨테이너 박스에 충분한 여백이 사라지게 되어 보기 깔끔하지 않은 디자인이 나오는 상황이 발생했다. 코드를 보자. 나는 부모 컴포넌트로부터 받아온 배열 데이터를 map 메소드를 이용해 브라우저에 하나씩 보여

React 컴포넌트의 라이프 사이클이라는 것은 컴포넌트의 생성, 업데이트, 제거 과정에서 일어나는 일련의 단계를 의미한다. class형 컴포넌트에서의 생명주기 메소드는 컴포넌트가 특정 시점에 어떤 동작을 수행하는지를 정의하고, 이를 활용하여 컴포넌트의 동작을 조절할 수

버튼 태그를 만들 때 우리는 onClick을 이용하여, 버튼을 눌렀을 때 실행시킬 이벤트 핸들러 함수를 설정한다. 여기에는 두 가지의 방법이 있다. onCick에 들어갈 함수를 호출하는 것과, 참조하는 것이다. 바로 코드를 살펴보자.호출이 경우에는 버튼이 랜더링 될때마

Next.js를 사용해 블로그를 개발하는 프로젝트를 진행하고 있다. 홈 화면 하단에 페이지네이션을 추가하여 가장 최근 게시물부터 한 페이지에 3개씩 게시물을 표시해야 하는 상황이다. 이 글에서 내가 공부한 방법을 바탕으로 이를 구현하는 방법을 적어보려고 한다. 코드를

개요 > pagination은 웹사이트의 사용성을 크게 향상시킬 수 있는 중요한 기능이다. 사용자가 수많은 데이터 중에서 원하는 정보를 쉽게 찾을 수 있도록 도와주며, 데이터 로딩 시간을 단축시켜 서비스의 퍼포먼스를 개선할 수 있다. 이번 글에서는, 저번글에서 다룬 모

부모 컴포넌트에서 두가지의 자식 컴포넌트를 가지고 있는 상황이다. 이 중 하나의 컴포넌트의 width값과 height값을 상위컴포넌트의 width값의 절반 크기를 가지게 해야하는 상황이다. ProjectImages의 컴포넌트의 width값과 height값을 Proje

React에서는 페이지 라우팅 대신 하나의 페이지 내에서 사용자가 네비게이션을 클릭할 때 해당 컴포넌트로 부드럽게 이동하는 방법에 대해서 다루어 보겠다.

커스텀 훅쓰는 곳form태그의 onSubmit에는 원래의 handleSubmit함수를 전달해주어야 한다.

useSlideFilterOption 훅HomeMain 컴포넌트

많이들 헷갈려하는 Reconciliation, 가상 DOM, 리렌더링에 대해 쉽고 간단하고 짧게 다뤄볼 예정이다.컴포넌트가 호출된다.컴포넌트의 state가 초기화된다. (컴포넌트 내부 로직 실행)컴포넌트가 JSX요소를 반환(return)하며, 이때 반환된 JSX 요소는

useUploadImage 훅컴포넌트 코드

useGeolocation 훅MapComponent