React9 리액트 팁 및 클린코드 - 2. 상태 상태와 관련 된 클린코드 정리초기값을 설정하라.결론 : 상태로 사용하려는 값의 타입에 맞추어 초기값을 설정해야 예상치 못한 에러를 방지할 수 있다. 초기 값이 없는 경우 에러를 초래할 수 있다. ide 의 도움도 받을 수 없다. 실수를 유발할 수 있다. 더보기아래와 같이 초기 값을 설정하지 않은 경우 에러가 발생한다.import { useState } from "react"export default function Component() { const [num, setNum] = useState(); return ( {num} setNum(num => num += 1)}>버튼 )} 수정 후 코드import { useState } from "react"export de.. 2024. 10. 25. 리액트 팁 및 클린코드 - 1. 컴포넌트 컴퍼넌트와 관련 된 클린코드 정리함수의 위치컴포넌트 내부에 있어야 할 함수 이벤트 핸들러이유 : 함수 내부에서 상태를 직접 사용하는 경우(set 함수를 사용하는 경우 포함) 리렌더링을 통해서 새로운 값을 전달받아야 하기 때문에 컴포넌트 내부에 둔다컴포넌트 외부에 있어야 할 함수로직을 담당하는 함수이유 : 상태를 직접사용하지 않고 파라미터를 통해서 전달받아서 값을 반환해주는 함수의 경우 다시 재생성 될 필요가 없기 때문에 컴포넌트 밖에 두어 메모리에 계속 누적되지 않도록 관리해준다(파생 된 값을 생성할때 사용하는 함수 등).더보기예제컴포넌트 내부에 있어야 하는 함수handleChange 와 같은 경우 setForm을 통해 상태를 변경시켜주어야 하기 때문에 컴포넌트 내부에 존재하는 것이 좋다.const Fo.. 2024. 10. 20. [Next.js] Next.js 시작하기 Next.js 리액트 프레임워크이기 때문에 기본적인 리액트의 사용방법을 숙지하고 있어야 합니다. 아래 내용은 Next.js 공식문서를 참조하였으며 리액트로만 앱을 작성했을때와의 차이점 위주로 소개하겠습니다. Next.js 시작하기 리액트와 마찬가지로 Next.js에서도 쉽게 앱을 생성할 수 있도록 create-next-app 을 제공하고 있습니다. 터미널에 아래의 명령어를 실행하면 몇가지 옵션을 선택한 후에 설치를 진행할 수 있습니다. 13버전부터는 설치시 선택가능한 옵션을 제공하고 있으며, src/app 옵션을 사용하는 경우 아래의 설명과 달라질 수 있습니다. (버전 : Next.js 13.3) npx create-next-app@latest start-nextjs 설치시 아래와 같이 디렉토리와 파일구.. 2023. 4. 18. 이전 1 2 다음
