본문 바로가기

전체 글34

Hook vs Store 기본적으로 리액트 훅과 Store(전역 상태 관리) 는 상태관리를 위한 도구이지만, 용도가 다르다. ✅ React Hook정의: React 함수형 컴포넌트에서 상태나 라이프사이클 기능을 사용할 수 있게 하는 함수.대표 Hook: useState, useEffect, useReducer, useContext, useMemo 등.역할: 개별 컴포넌트 안에서의 로컬 상태를 관리.범위: 해당 컴포넌트 내에서만 유효. 다른 컴포넌트에서 직접 접근 불가.용도: 버튼, 로컬에서만 사용하는 입력 등✅ Store (전역 상태 관리)정의: 여러 컴포넌트가 공유하는 전역 상태를 저장하고 관리하는 공간.사용 예: Zustand, Redux, Recoil 등.역할: 앱 전체에서 사용할 수 있는 상태를 보관하고, 구독자를 업데이.. 2025. 5. 8.
spread operator 여러 요소로 이루어진 배열, 객체, 함수에서 여러 개의 인자를 한방에 넣기 위한 역할을 한다. 말 그대로 여러 요소들을 spread 한다는 의미.* 객체의 경우 같은 키 값을 가진다면 덮어쓰기를 하게된다. const arr1 = [1,2,3]const arr2 = [3,4,5]const mergedArr = [...arr1, ...arr2] // [1,2,3,3,4,5]const obj1 = { a:1, b:2 }const obj2 = { a:2, c:3 }const mergedObj = { ...obj1, ...obj2 } // { a:2, b:2, c:3 }function test(x, y, z){ return x + y + z;}const arr = [1, 2, 3, 4];const resul.. 2025. 4. 30.
타입 가드 타입 가드원하는 타입으로 타입을 좁히기 위한 작업type Age = 'string' | 'number'function getAge(age: Age) { .. }이 경우 함수 파라미터로 문자열이 와야할까 숫자가 와야할까? 둘 다 올수있지만, 그렇다고 함수 안에서 age.length 이런 식으로 접근하면 에러가 발생한다. 그 이유는 age의 type이 확정되지 않았기 때문. 따라서, 아래와 같이 예외 처리를 통해 타입을 좁히는 것을 타입가드라고 한다....if (typeof age === 'string') { age.length; ....}typeof, instanceof이 연산자들을 타입 가드 연산자라고 한다.이외에도 커스텀 타입 가드 함수를 만들 수도 있다.function isString(age: str.. 2025. 4. 17.
데이터 바인딩 화면 상의 데이터(View)와, 웹 브라우저 메모리 상의 데이터(Model)의 정보를 묶어서(Binding) 일치시키는 것.즉, 동기화. 양방향 데이터 바인딩https://adjh54.tistory.com/49]정의 : JavaScript(Model) 과 HTML(View) 사이에 ViewModel 이 존재해서 하나로 묶여서, 둘 중 하나만 바뀌어도 같이 바뀌는 것. 대표적으로 Vue.js, Angular 가 이 방식이다.장점코드량이 줄어든다.복잡한 프로젝트일수록 코드량은 줄고, 유지보수가 용이해진다.단점변화에 따라 DOM 객체 전체를 렌더링하거나 데이터를 바꿔주므로 성능이 저하될 수 있다. (프레임워크가 계속 감시하다가 한쪽이 변경되면 이를 바로 반영하므로 별도 체크가 불필요하다)단방향 데이터 바인딩[.. 2025. 4. 17.
Type Assertion (as 사용법) Type Assertion타 언어의 타입 캐스팅이라고 봐도 되는데, 좀 더 포괄적이다.사용법const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;컴파일 단계에서 타입 검사를 할 때, 타입 스크립트가 감지하지 못하는 애매한 타입 요소들을 직접 명시해주는 키워드. (런타임 단계에서는 as가 삭제된다)만약 as 가 없다면, 타입스크립트는 myCanvas 가 여러개의 HTMLElement 중 어느 하나를 가진다고 대충만 알게 된다.이렇게만 보면 대체 왜 쓰는건지 감이 잘 안 온다.why?컴파일러보다 개발자가 해당 타입을 확신할 때.JS 기반 코드에다가 점진적으로 TS 를 적용할 때.interface Hero { name: st.. 2025. 4. 16.
type vs interface Type Aliases타입 스크립트에서 타입 별칭 사용하기// string 타입을 사용할 때const name: string = 'capt';// 타입 별칭을 사용할 때type MyName = string;const name: MyName = 'capt';type Developer = { name: string; skill: string;}type User = { name: T}간단한 자료형부터 인터페이스, 제네릭에도 적용 가능하다.타입 별칭은 정의한 타입에 대해 나중에 참고하기 쉽도록 별명을 붙이는 작업이다.그냥 type을 앞에 붙이면 됨.type alias vs interfacetypeAliases 를 위해 앞서 본것 처럼 사용할 수 있다.나만의 type 을 생성한 뒤 alias 로 타입을 지정.. 2025. 4. 16.