728x90 반응형 typescript8 [TIL] 11/15 -webkit-box, Ellipsis, $ 접두사, 낙관적 업데이트 1. EllipsisBox 만들기ElipsisBox 란 일반적으로 텍스트가 지정된 범위를 초과할 때 나머지 텍스트를 생략하고 말줄임표 (...) 를 표시하도록 스타일링된 컨테이너를 의미한다. 1.1. 전체 코드interface Props { children: ReactNode; linelimit: number; // 몇 줄까지 보여줄 것인지}const EllipsisBox = ({ children, linelimit }: Props) => { const [expanded, setExpanded] = useState(false); // 처음엔 확장되지 않음 return ( {children} {setExpanded(!expanded)}}> .. 2024. 11. 15. [TIL] 11/14 - Zustand, useSearchParams, URLSearchParams, useLocation, 동적 CSS 1. ZustandZustand 는 작고 빠르며 확장 가능한 리액트 프로젝트에서 사용하는 상태관리(Store) 라이브러리이다. 스토어(Store) 는 애플리케이션의 여러 상태(state) 를 중앙에서 관리하는 것을 말한다. 이를 통해 컴포넌트 간 데이터를 쉽게 공유하고 데이터 변경을 감지해 자동으로 렌더링할 수 있다. 리액트는 기본적으로 부모 -> 자식 방향으로 데이터를 전달을 하고 이런 방식을 Props(Emits) 방식이라고 부른다. 하지만 컴포넌트가 중첩되어 있는 경우, 그림과 같이 중간에 있는 컴포넌트들이 불필요한 데이터를 취급하게 된다. (Props Drilling)이 방식은 컴포넌트 간의 결합도를 높이고 유지/보수를 어렵게 만든다. 그래서 스토어를 사용해서 공유해야 하는 데이터들을 .. 2024. 11. 14. [TIL] 11/11 React context API, 테마 스위쳐 구현, 모르는 것 정리 1. styled-components 리액트와 같은 자바스크립트 프레임워크에서 CSS 작성을 도와주는 CSS-in-JS 라이브러리로, 자바스크립트 코드 안에서 스타일을 작성할 수 있게 해준다. 자바스크립트 코드 안에서 스타일을 작성하기 때문에 컴포넌트 단위로 스타일을 지정하여 모듈화된 코드 작성이 가능해져 유지보수와 확장성을 높이는 데 유리하다. 1.1. 특징 - CSS-in-JS: 자바스크립트 파일 안에서 직접 스타일링을 정의 -> 컴포넌트 자체적으로 스타일을 정의해 컴포넌트 간의 스타일이 격리되고 CSS 충돌을 방지할 수 있음 - Tagged Template Literals: 자바스크립트의 Tagged Template Literals 문법을 사용하여 CSS 를 정의하여 CSS 와 JavaScrip.. 2024. 11. 11. [React] Redux 사용하기 (feat. TypeScript) 1. redux 1.1. 리덕스란?단일 저장소(store): 리덕스는 하나의 중앙 저장소를 통해 애플리케이션의 상태를 관리 -> 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 변경하는 것을 금지하고, 상태가 갱신될 때는 새로운 객체를 반환 -> 직접 상태를 변경하는 것이 아니기 때문에 예측 가능성을 높이고 상태 관리의 안정성을 제공액션(Actions) & 리듀서(Reducers): 상태를 변경할 때는 액션 객체를 디스패치하고, 리듀서는 이 액션에 따라 새로운 상태를 반환 -> 이를 통해 상태 변경 로직이 예측 가능하고 테스트하기 쉬움 - 리액트에서는 이미 state 랑 props 로 상태 관리 잘하고 있는데 (feat. 리덕스를 쓰는 이유)? 리액트에서 데이.. 2024. 11. 7. 이전 1 2 다음 728x90 반응형
