뇌 채우기 공간

useCallback으로 이전에 만들었던 함수 재사용 하기 컴포넌트가 리렌더링 될때마다 새로운 함수를 계속 만들고 있는 문제 -> 함수를 새로 만드는 것은 메모리도 cpu도 많이 차지하지는 않기 때문에 그 자체만으로 부하가 걸리진 않는다. 그럼에도 한번 만든 함수를 재사용할 수 있다면 재사용 하는게 좋다. 사용법 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ); 이렇게 useCallback으로 감싸준다 그러면 deps에 넣은 값이 바뀔때만 함수가 새로 만들어진다. 여기서는 inputs가 바뀔때만 함수가 새로 만들어진다. 이렇게만 ..

문제 발생 책 검색을 구현 리뷰할 책을 선택하면 -> 책 검색 모달이 뜨고 -> 책 검색 모달에서는 책들이 뜨고 -> 선택하면 화면에 뜬다. 이것을 구현하는데 모달을 열고 닫고하는 state를 부모에서 자식으로 그 자식으로 계속 넘기고 있었다. 이것은 리액트에서 지양하는 데이터 흐름이다. 부모에서 자식으로 흐르는 단방향 데이터 흐름을 사용한다. -> 단방향 데이터 바인딩에 관한 포스팅 해결방안 - 리덕스로 전역으로 상태관리! 리덕스로 모달을 열고 닫는 액션을 만들어서 모달 열고 닫는 state를 부모에서 자식으로 넘겨주지 않더라도 리덕스로 관리하였음!

참고: 땅콩코딩 1. 타입명시 syntax 변수에 타입 명시하기 let studentId:number = 12345; let studentName:string = "hyeonju"; let age:number = 21; let gender:string= "woman"; let subject:string ="fashion"; let courseCompleted:boolean = false; function에 리턴값 지정 타입스크립트에게 더욱 더 정확하고 자세한 정보를 주는 것이 좋다. function의 반환값을 지정해줄 수 있다. 아무것도 리턴하지 않는다면 void를 주면 된다. 지금은 객체를 리턴할 것이므로 object를 썼다. 하지만 위에서 말했듯 자세한 정보를 주는 것이 좋다. 반환값과 유사한 형태로..

앞의 게시물 보고 오기 타입 스크립트는 우리가 할당한 값에 의거하여 타입을 추론한다. 그래서 애초에 number로 할당했던 변수에 string을 새롭게 할당하려고 하면 오류가 난다. 위의 function에서도 lostPoints의 타입을 지정해주지 않았지만 hover를 해보면 return값을 분석하여 lostPoints가 number일것이라고 추론하는 것을 볼 수 있다 . 매우 똑똑하다 참고 : https://www.youtube.com/watch?v=rwqqhvR353A&list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN&index=3

타입스크립트(TypeScript)란? 자바스크립트의 supterset인 오픈소스 프로그래밍 언어. 마이크로 소프트에서 개발, 유지 하고 있음 엄격한 문법을 지원. 자바스크립트 엔진을 사용하여 커다란 애플리케이션을 개발할 수 있게 설계된 언어. 모든 운영체제, 모든 부라우저, 모든 호스트에서 사용가능한 오픈 소스 자바스크립트의 모든 기능을 포함, 자바스크립트에 포함되지 않는 새로운 기능이 있다. 왜 타입스크립트를 사용하는가? 자바스크립트를 사용할때보다 버그를 줄이고 유지보수가 쉽다. 질 좋은 코드를 만들 수 있다. 특징 1. 변수를 정의할 때 데이터 타입 지정 가능 예측가능하며 디버깅하기 쉽다. 2. 객체 지향적이다. 3. 컴파일 타임 오류를 잡을 수 있다. 개발환경 설정하기 1. 준비 vscode, no..