기타 (+ Legacy)/Legacy 검색 결과

해당 글 47건

[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의 초기값 위와 같이 작성하면 ..
기타 (+ Legacy)/Legacy 2022. 6. 6. 07:05

[React] React hooks 다루기

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

[React] react-hook-form 사용 및 useForm - 1

[React] react-hook-form 사용 후 및 useForm - 1 이전 게시글에서는 react-hook-form에 대한 아주 간략한 설명과 react만을 이용하여 회원가입 폼을 구현해보았습니다. 이번 게시글에서는 useForm에 대해 조금 더 자세하게 알아보고, react-hook-form을 이용하여 이전 게시글에서 구현한 내용을 개선해보겠습니다. useForm 개선하기 전 react-hook-form에서 제공하는 여러가지 hook 중 1개인 useForm에 대해 알아보고 그 중에서도 register 함수에 대해 알아볼 것입니다. 간단하게 사용 예시를 들자면 아래와 같이 작성합니다. (더 자세히 알아보는 것은 아래 링크에 걸어둔 useForm 문서를 확인해보세요.)​ ◆ register con..
기타 (+ Legacy)/Legacy 2022. 4. 20. 19:21

[React] react-hook-form 소개 및 사용 전

[React] react-hook-form 소개 및 사용 전 예전에 react-hook-form에 대해 작성한 적이 있었다. 이 때 react-hook-form을 제대로 이해하지 못 한 부분이 있었고, 다시 읽어보니 material-ui와 함께 사용하는 부분만 적혀있는 듯한 느낌이 들었다. 따라서 이번에 다시 공부해보며 정리해보려고 한다. react-hook-form 소개 우선 여기서 설명하는 react-hook-form은 Version 7을 의미합니다. react는 사용하던, vue, angular 등 웹 환경에서 form data를 다루어야하는 경우는 매우 많이 있습니다. 대표적으로 회원가입을 할 경우 input form을 사용하지 않기는 힘들 것 같습니다. 회원가입을 구현할 경우 validation..
기타 (+ Legacy)/Legacy 2022. 4. 17. 13:30

[React] map에서 key를 사용하는 이유, 주의점

[React] map에서 key를 사용하는 이유, 주의점 블로그 게시글 중 Warning: Each child in a list should have a unique "key" prop. 의 에러를 다루는 게시글이 있다. (게시글 이동하기) 그런데 해당 게시글에 왜 key를 사용해야 하는 지?에 대해 문의 댓글이 달려 한번 알아보려고 한다. key를 사용하지 않으면 ??? DOM 노드의 자식을 재귀적으로 처리하는 경우 React에서는 동시에 2개 리스트를 순회하고 차이가 있는 경우 변경을 생성한다. 이게 무슨 말이냐? 아래 예시를 확인해보자. first second first second third 이전 리스트에는 third가 없고 이후 리스트에는 third가 있으니 변경이 일어난 것이다. 따라서 트리 ..
기타 (+ Legacy)/Legacy 2022. 4. 2. 16:27

[React, Next] React, Next JS, TS 프로젝트 생성

[React, Next] React, Next JavaScript, TypeScript 프로젝트 생성 이번 게시글에서는 React, Next 프로젝트를 JavaScript, TypeScript로 생성하는 방법을 알아보도록 하겠습니다. JavaScript 프로젝트 생성 ◆ React 프로젝트 React 프로젝트를 JavaScript로 생성하는 것은 아래 명령어를 사용하면 됩니다. 명령어 : npx create-react-app 프로젝트명 ex) npx create-react-app react-project ◆ Next 프로젝트 Next 프로젝트를 JavaScript로 생성하는 것은 아래 명령어를 사용하면 됩니다. 명령어 : npx create-next-app 프로젝트명 ex) npx create-next-..
기타 (+ Legacy)/Legacy 2022. 3. 30. 19:43

[NextJS] 동적 routing 작업하기

[NextJS] 동적 routing 작업하기 이번 게시글에서는 동적 routing 작업을 해보겠습니다. 동적 routing 우리가 하고자 하는 것은 /details/과일이름 url을 만들고 해당 url에 접속하면 해당 컴포넌트가 보여지는 것입니다. 여기서는 apple, banana, orange가 있다고 가정해보겠습니다. 그럼 pages/details 폴더 아래 apple. banana, orange 파일을 만들어 주어야 합니다. 아래 이미지를 참고해봅시다. 해당 컴포넌트 코드도 확인해보겠습니다. apple.js코드는 아래와 같습니다. (나머지 동일 패턴) export default function Apple() { return Apple 페이지; } 그렇다면 해당 url에 접속하기 위한 header m..
기타 (+ Legacy)/Legacy 2022. 3. 28. 05:33

[NextJS] routing, 공통 layout 작업

[NextJS] routing, 공통 layout 작업 이번 게시글에서는 NextJS에서 routing 작업을 하는 방법, 공통 layout을 잡는 방법을 알아보도록 하겠습니다. (css 설명은 없습니다.) routing & 공통 layout ◆ routing NextJS에서 routing 작업 하는 방법은 매우 간단합니다. 그냥 pages 폴더 아래 폴더 및 파일을 내가 원하는 url 형식으로 생성해주면 됩니다. 예를들어 /test/intro/a 와 같은 url을 만들고 싶으면 pages 폴더 아래 test 폴더 -> intro 폴더 -> a.js 파일을 만들면 됩니다. 그럼 해당 url로 접속할 경우 a.js 컴포넌트가 보여집니다. 그럼 예시로 /intro url를 생성해봅시다. 아래 이미지와 같이 ..
기타 (+ Legacy)/Legacy 2022. 3. 25. 05:54

[Next.js] Next.js 소개

[Next.js] Next.js 소개 Next.js는 React Framework 입니다. Next.js는 CSR인 react를 보다 더 쉽게 SSR이 가능하도록 도와줍니다. SSR이 가능하면 SEO에 더 유리하게 됩니다. 그 뿐만이 아니라 SSR, SSG, CSR 중 내가 원하는 방법으로 렌더링 방식을 정할 수 있습니다. 또한 routing 작업, 404 page 등 보다 더 다양한 기능을 쉽게 사용할 수 있습니다. 해당 카테고리에서는 nextjs에 대해 알아보고 SSR, SSG, CSR을 nextjs로 하는 방법을 알아보겠습니다. Next.js 개발 환경 셋팅 우선 nextjs 개발 환경을 셋팅해보도록 하겠습니다. 설치 명령어 : npx create-next-app project-name 설치 명령어..
기타 (+ Legacy)/Legacy 2022. 3. 24. 05:37

[React] useCallback, useMemo 잘 쓰기

[React] useCallback, useMemo 잘 쓰기 React로 개발하다보면 useCallback, useMemo를 사용하는 경우가 많이 있습니다. 해당 hook들은 성능 개선을 위해서 사용됩니다. 조금 더 자세히 말하면 이 함수나 변수 값이 component 내부에서 특정 조건에 해당할 때만 다시 생성하겠다 라는 의미입니다. 해당 게시글은 useCallback, useMemo에 대해 상세하게 다루는 게시글이 아니니깐 여기까지만 설명하겠습니다. 그런데 위 useCallback, useMemo를 의도와 맞지 않게 사용하거나 사용하였는데 내가 원하는 대로 동작하지 않는 경우가 있습니다. 사실 의도와 맞지 않게 사용하는 것은 큰 문제가 되지 않지만, 내가 원하는 대로 동작하지 않는 것은 문제가 됩니다..
기타 (+ Legacy)/Legacy 2022. 3. 11. 07:51