공유/React, Next 검색 결과

해당 글 25건

[React] React 컴포넌트에서 Generic 사용하기

React 컴포넌트에서 Generic 사용하기 만약 컴포넌트 개발이나 공용 유틸 함수를 개발하지 않는다면, 타입스크립트의 제네릭을 사용하지 않을 수도 있습니다. 이 글을 읽고 있다면 컴포넌트 개발에 어려움을 겪고 있을 가능성이 높습니다. 이제 리액트 컴포넌트에서 제네릭을 어떻게 활용할 수 있는지 간단히 살펴보겠습니다. 리액트 컴포넌트에서 제네릭 사용하는 방법 사용방법 1 const Component = (props:Props) => { return } 위처럼 아주 간단하게 사용할 수 있습니다. 그러나 타입스크립트에게 T의 값에 대한 정보를 조금 더 제공해줄 수도 있습니다. 사용방법 2 const Component = (props: Props) => { return ; }; 위처럼 작성하면 T의 값은 st..
공유/React, Next 2024. 3. 19. 19:22

[React] 키보드 이벤트 처리

[React] 키보드 이벤트 처리 React에서 키보드 이벤트 처리하는 방법을 알아보도록 하겠습니다. (JavaScript도 방법은 동일합니다.) input element를 사용하여 키보드 이벤트 처리하는 방법을 알아보도록 하겠습니다. 이번 게시글은 제가 봐도 정말 못 적은 것 같습니다. 간단정리와 코드만 작성을 보시는 것을 추천 드립니다. 급하신 분들은 제일 밑에 코드로 정리해두었으니 복붙해서 사용하시면 됩니다. 키보드 이벤트 처리하기 웹 개발을 하다보면 키보드 이벤트 처리해야하는 경우가 있습니다. 대표적으로 사용자가 Enter를 입력했을 때 검색이 자동으로 되는 기능이 있습니다. 이러한 기능을 개발할 때 사용자가 Enter를 입력하였는 지 알아야 합니다. 이때 사용하는 것이 키보드 이벤트 처리입니다...
공유/React, Next 2023. 2. 9. 18:34

[React] react-hook-form yup으로 validation 처리하기

[React] react-hook-form yup으로 validation 처리하기 이전 게시글에서 react-hook-form을 사용하면 얼마나 간단하게 form 처리를 할 수 있는지 알아보았습니다. 그 과정에서 에러 핸들링에 대해서도 간단하게 처리할 수 있는 것을 확인하였습니다. 그래도 불편한 점이 있습니다. ; 위 코드를 확인해보면 코드 중간에 에러 처리를 해주어야 한다는 것입니다. 물론 최상단에 변수로 따로 빼서 처리하면 되지만 불편합니다. 이러한 불편함을 해결해주고 더 간단하게 에러 핸들링을 할 수 있도록 도와주는 yup 라이브러리가 있습니다. 이번 게시글에서는 yup을 통해 이전 게시글에서 했던 에러 핸들링을 더 깔끔하게 해보겠습니다. yup 설치하기 yup을 사용하기 위해 필요한 설치 명령어입..
공유/React, Next 2022. 9. 23. 19:06

[React] useEffect 실습

[React] useEffect 실습 useEffect 실습 이번 게시글에서는 useEffect 실습을 해보도록 하겠습니다. - 윈도우 창 resize 이벤트를 알 수 있는 방법 - 1씩 증가하는 timer 만들기 (1) - 1씩 증가하는 timer 만들기 (2) - 화면에 보여지지는 않음 위 3개의 실습을 해보도록 하겠습니다. 전체 코드 보러 가기 : 링크 ◆ resize event 코드 보러가기 : 링크 useEffect에서 윈도우 resize를 등록하고 해지하는 것을 해보도록 하겠습니다. 그리고 윈도우 width 크기에 따라 컴포넌트의 배경 색을 변경하는 것을 해보도록 하겠습니다. 코드는 아래와 같습니다. 우선 코드 설명부터 간단하게 하겠습니다. useEffect에서 마운트 시 resize 이벤트를..
공유/React, Next 2022. 6. 17. 04:10

[React] useEffect 개념

[React] useEffect 개념 useEffect 개념 이번 게시글에서는 새로운 hook useEffect에 대해 알아보겠습니다. useEffect는 기본 hook으로 react의 life cycle을 확인할 수 있습니다. 해당 hooks은 잘 사용하면 좋지만 그렇지 않은 경우 버그를 유발하는 hook이 될 확률이 높습니다. 이번 게시글에서 한번 알아보겠습니다. 전체 코드 보러 가기 : 링크 ◆ useEffect - React life cycle react에서는 마운트, 언마운트 개념이 있습니다. 간단하게 설명하면 아래와 같습니다. 마운트 : 컴포넌트가 생길 때 언마운트 : 컴포넌트가 사라질 때 라고 생각하시면 편합니다. 그럼 useEffect로 마운트, 언마운트를 더 자세히 알아보겠습니다. 아래 ..
공유/React, Next 2022. 6. 15. 05:34

[React] useRef 개념 및 실습

[React] useRef 개념 및 실습 useRef 개념 및 실습 (+ 작성하다 보니 전부 존댓말로 작성하여 그냥 앞으로 존댓말로 작성하겠습니다.) 이번 게시글에서는 새로운 hook useRef에 대해 알아보겠습니다. useRef의 사용 방법과 useState의 차이점에 대해 알아보겠습니다. 전체 코드 보러 가기 : 링크 ◆ DOM 접근 전체 코드 보러 가기 : 링크 useRef는 DOM에 접근하고 싶을 때 많이 사용합니다. JavaScript에서 document.querySelector() 와 같은 함수를 대신 사용한다고 생각하시면 됩니다. 그럼 어떻게 DOM에 접근할 수 있을까요? DOM에 접근하는 방법은 아주 간단합니다. useRef 변수를 선언한 후 DOM에 ref로 연결만 해주면 됩니다. 아래..
공유/React, Next 2022. 6. 13. 05:22

[React] useState hook - 동적 테이블 구현

[React] useState hook - 동적 테이블 구현 useState hook - 동적 테이블 구현 이번 게시글에서는 state를 이용하여 간단한 동적 테이블을 구현해보자 이름과 나이만 있는 직원 리스트를 구현해보자. 실습 코드가 필요한 경우 핵심 코드만 작성할 것이다. 전체 코드는 링크해둔 url에서 확인할 수 있다. 최종 코드 보러가기 : 링크. ◆ 동적 테이블 구현하기 구현할 동적 테이블 기능은 아래와 같다. 항목 : 이름, 나이 항목 추가 항목 삭제 항목 내용 변경 그럼 위 기능을 가진 state는 어떤 구조일까? 를 생각해보아야 한다. 테이블 데이터이니 배열 형태의 구조를 가지고 있을 것이다. 또한 이름과 나이를 가지고 있으니 최종 모습은 아래와 같을 것이다. - 초기 값은 빈 배열 - ..
공유/React, Next 2022. 6. 11. 05:14

[React] useState hook 실습

[React] useState hook 실습 useState hook 실습 내용 저번 게시글에서 확인한 useState를 실습해보려고 한다. 실습 내용은 아래와 같다. 1. state 정상 변경 - 렌더링 확인 2. state 비정상 변경 - 렌더링 확인 3. object type state 변경 - 렌더링 확인 실습 코드가 필요한 경우 핵심 코드만 작성할 것이다. 전체 코드는 링크해둔 url에서 확인할 수 있다. ◆ state 정상 변경 (setState) 전체 코드 보러가기 state 값을 변경할 때는 setState를 이용해야 하는 것을 배웠다. 예를들면 아래와 같이 변경해야한다. 이렇게 setState를 이용해 state를 변경한 결과는 아래와 같다. count 증가 버튼을 클릭하면 count가 ..
공유/React, Next 2022. 6. 9. 05:08

[React] useState hook 이해하기

[React] useState hook 이해하기 useState hook 개인적인 생각에 useState hook만 이해하면 react의 50%는 이해했다고 생각한다. 기초적인 내용이지만 그만큼 react의 핵심 내용이라고 볼 수 있다. 따라서 해당 게시글에서 알아볼 내용이 꽤 많다. 자세히 읽어보면 분명히 많은 도움이 될 것으로 생각한다. (+ 현 게시글 대부분의 코드는 sudo code 이다.) ◆ useState 그래서 그 중요한 useState hook이 뭔데? useState는 배열을 return 해주는 함수이다. 코드로 먼저 살펴보면 아래와 같다. 간단하게 설명하자면 state : state setState : state를 변경시키는 함수 value : state의 초기값 위와 같이 작성하면 ..
공유/React, Next 2022. 6. 6. 07:05

[React] React hooks 다루기

[React] React hooks 다루기 React hooks 다루기 소개 사실 react를 기초부터 설명하려고 했던 도전은 계속있었다. 그러나 어느 정도 하다가 계속 실패하였다. 실패의 원인을 분석하니 너무 자세하게 많은 것을 설명하려고 했던 것 같다. 간단하게 핵심만 설명해보도록 해야겠다. 해당 시리즈는 react를 전혀 모르면 어렵다고 생각된다. react가 뭔지는 아는데 정확히 모르겠다. 라는 사람에게 많은 도움이 될 것 같다. (+ 회사에서 신입들이 기초 잡는 것을 어려워 하는 것 같이 작성하는 것도 있다.) (+ 존댓말로 하고 싶었는데 이미 반말로 적어 반말로 간다.) ◆ 작성할 react 개념 - useState - useRef - useEffect - useCallback, useMemo..
공유/React, Next 2022. 6. 5. 22:02