React11 리액트 팁 및 클린코드 - 4. 기타 기타커스텀 훅 반환값결론 : 커스텀 훅의 반환값은 배열, 객체 등 원하는 것으로 선택하자. 흔히 처음에 가장 먼저 접하게 되는 훅인 useState 에 의해서 훅의 반환 값은 [값, setter] 로 해야한다는 생각을 가지게 된다. 하지만 훅의 반환값은 해당 훅의 기능에 맞춰서 원하는 형태로 반환해주면 된다. export const usePosition() { const [x, setX] = useState(0); const [y, setY] = useState(0); return { x, y, setX, setY, }} 인라인 스타일 X인라인 스타일은 자제하라. 동적으로 스타일을 주고 싶다면 클래스네임을 활용하라. 삼항연산자로 클래스 네임 설정조건에 따라 클래스네임을 추가할지 제거할지를 정.. 2024. 11. 2. 리액트 팁 및 클린코드 - 3. Props Props와 관련 된 클린코드 상태를 끌어올리는 것을 주의하라결론 : 의미없는 상태 끌어올림은 의미없는 리렌더링을 발생시킨다. 자식 요소만 리렌더링 되어야 하는 경우에도 상태가 끌어올려져서 부모 컴포넌트가 리렌더링 되는 문제가 발생한다.부모에서 다른 자식 컴포넌트를 사용하는 경우 다른 자식 컴포넌트도 리렌더링 되어 성능에 좋지 못하다. 더보기예를 들어 input과 관련 된 상태를 부모로 끌어올리는 경우 사용자가 타이핑 할때마다 해당 상태를 관리하는 컴포넌트는 매번 리렌더링 된다. 그래서 input은 관련된 컴포넌트에 두고 최종 결과만 부모 컴포넌트에 전달해서 사용하는 방법을 사용하는 것이 성능상 좋다. 잘못 된 예아래는 input을 변경할 때마다 부모의 상태를 변경한다. 이로인해 부모가 리렌더링 되면서 .. 2024. 10. 26. 리액트 팁 및 클린코드 - 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 다음
