Coding/[Web] Frontend 11 [Javascript] null, undefined undefined vs null undefiend와 null이 비슷한 것 같지만 다르다. 명시적으로 없음을 나타내기 위해서는 undefined보다는 null이 좋다. undefined 값이 정의된 적 없음을 나타낸다. typeof undefined : 'undefined' null 값이 없음을 나타낸다. typeof null : 'object' 대입한 적 없는 변수나 속성과, 명시적으로 '없음'을 나타내는 경우가 구분되어야 코드의 의미가 명확해진다. 그렇기에 null과 undefiend를 구분해서 사용하는 것이 좋다. equality, identity 비교 시에도 차이가 발생한다. equality 비교 null == undefined : true indentity 비교 null === undefined .. 2024. 1. 11. [React] useImperativeHandle (forwardRef의 ref 커스터마이징) useImperativeHandle forwardRef를 사용할 때 ref로 넘어가는 메소드나 값들을 커스텀하고 싶은 경우가 있다. 이런 경우 useImperativeHandle을 사용하면 부모 A가 forwardRef 자식 B에 접근해서 여러 메소드나 값을 사용할 수 있게 할 수 있다. 파라미터 useImperativeHandle(ref, createHandle, dependencies?) ref 필수 forwardRef의 두번째 인자로 넘어오는 ref이다. createHandle 필수 부모에서 ref.current 로 접근할 수 있는 핸들러를 리턴하는 함수이다. 어떤 타입이든 넘길 수 있으나 주로 대게 메소드들을 담은 object를 넘긴다. dependencies optional 다른 상태 함수들에서.. 2024. 1. 4. [React] Store 유지한 채 페이지 새로고침하기 (Remounting) Remount 구현하게 된 배경 React를 사용할 때 전역 상태의 값은 냅두고 페이지를 새로고침하고 싶을 때가 있다. 예를 들어, 신청페이지에서 신청 내역을 작성 후 신청을 했을 때 사용했던 모든 local state를 초기화하고 싶은 경우이다. 이는 단순히 rerender를 통해 상태나 값을 새로 그리는것과는 다르다. 기존의 컴포넌트를 unmount 시킨 후 새로운 것을 mount 시키는 remounting을 원하는 것에 가깝다. 🙅♂️ window 이용? window.location.reload()를 통해 새로고침을 하면 상태를 비워버릴 수는 있지만 이 또한 아래와 같은 문제가 있다. 모든 state가 초기화되는 점 (local state를 포함한 global state(zustand 등)까지) .. 2023. 12. 24. [React] useReducer useReducer React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다. useState와 마찬가지로 상태를 관리하지만, 컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서 useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... } Parameter, Return const [state, dispatch] = useReducer(r.. 2023. 12. 24. [CSS] 스타일 우선순위 CSS Style 우선순위 전체적으로 !important 키워드를 사용한 스타일 inline style id class, 수도 클래스 tag, 수도 엘리먼트 동일 우선순위 중 같은 파일 내에서 나중에 작성된 것 (파일 아래에 있는 것) 먼저 작성된 것 (파일 위에 있는 것) 2023. 3. 27. 이전 1 2 3 다음
