yebeen blog

문제backgroun-color를 설정할 때 padding까지 배경색이 먹는 문제 발생  해결책다음과 같은 속성 사용하기 background-clip: padding-box;  추가정보background-clip의 값은 padding-box, border-box, content-box가 있다.- padding-box : 배경색이 padding+content에 영향을 미친다.- border-box : 배경색이 border+padding+content에 영향을 미친다.- content-box : 배경색이 content에 영향을 미친다.    [ 참고 ] https://www.w3schools.com/cssref/css3_pr_background-clip.php W3Schools.comW3Schools off..

useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current  프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current    처음에는 전달한 initialValue로 설정된다.    값을 변경할 수 있다.    하지만 state와 다르게 리렌더링을 유발하지않는다.    ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u..

Zustand란?상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법이라는 장점을 가지고 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다.   JavaScript에서 사용하기1. Zustand 설치# NPMnpm install zustand# Yarnyarn add zustand  2. store 생성하기스토어를 생성하기 위해 create 함수를 사용한다.스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어있다.    ex_버튼을 선택하는 함수와 count를 증가시키는 함수, count를 리셋하는 함수 작성import create from "zus..

useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook  예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies);    예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl..

게시판 같은 곳에 텍스트의 길이가 너무 길어져 텍스트가 담긴 공간을 넘어가글씨가 댕강 잘리거나  문제가 발생한다.그러면 당연히 예쁘지않다!!!!! 그래서 말 줄임표를 주로 사용하는데 사용하려할때마다 까먹어서 기록해둔다...white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

문제프로젝트를 진행하면서 만났던 무한 렌더링 문제문제의 코드는 다음과 같다.export default function SideBar(){ const [isChat,setIsChat] = useState(true); return ( 채팅 내담자 정보 { isChat? : ..

useCallback Hook이란 ? useMemo와 마찬가지로 메모제이션 기법을 이용한 Hook으로 함수의 재사용을 위한 Hook이다.리렌더링 간에 함수 정의를 캐싱해준다. 아래의 코드를 보면 첫번째 인자는 리렌더링 간에 캐싱할 함수 정의이고 두번째 인자는 반응형 값들이 들어간다.여기서 반응형 값이 변경(의존성이 변경)되었을 때만 다시 메모제이션된 버전이 변경된다.const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],);   또 다른 예시로 이 코드의 경우 x,y값이 바뀌지않는 경우기존 함수를 계속 반환하고 다음 렌더링 때 기존 함수를 다시 사용한다.만약 이어지는 렌더링에서 의존성을 비교했을 때 전과 달라지면 이..