REACT

· React
&& 연산자 사용 리액트를 깔끔하게 작성하는 방법을 적은 저자 타일러 호킨스는 조건이true 면 렌더링하고 false 아무것도 렌더링 하지 않아야 하는 경우 삼항 연산자를 사용하지마세요. &&대신 연산자를 사용하세요 라고 주장하며, 저자 켄트 C. 도즈는 반대로 **JSX에서 && 대신 삼항 연산자 사용**하는 것이 좋다고 주장하고 있습니다. && 보다 삼항 연산자 사용 // BAD... function ContactList({contacts}) { return ( {contacts.length && contacts.map(contact => ( {contact.firstName} {contact.lastName} ))} ) } function Error({error}) { return error && ..
· React
필자는 재사용하고 싶을 때 사용한다는 말, 성능 최적화 등등의 말만 보고 대부분 함수에다가 useCallback을 남용하였습니다. 이로 인하여 코드가 복잡해지거나, 유지보수에 어려운 점을 겪는 경험을 하여 ..useCallback을 이렇게 남용해도 되는 건가냐는 생각 하게 되어, 여러 문서를 보고 정리해 보았습니다 ! 제대로 알고 사용하자 ! 모르고 사용하면 중범죄다! 반성 후 열심히 코드 고쳤습니다. useCallback 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. 메모제이션 콜백을 반환합니다. 즉 리 렌더링 최소화하기 위해 사용합니다. 한번 만든 함수는 필요할 때만 만들어지고 재사용 ! Component에서 props 가 바뀌지 않으면 렌더링 하지 않습니다. 1. 함수 동등성 이해 ..
· React
npx create-next-app 사용하지 않고 설치해보기 ! 1. next.js 설치 및 실행 설치 npm i next react react-dom package.json 에 넥스트를 실행할 script 명령어 추가하기 "scripts": { "dev": "next", "build": "next build", "start": "next start" },​ pages 폴더 생성후 index.js 생성 const Home = () => Hello, Next!; export default Home; npm run dev .next 폴더 생성됨 2. TypeScript 설치 root 디렉토리에 tsconfig.json 파일 생성 npm install --save-dev typescript @types/rea..