728x90 반응형 TIL with Programmers72 [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/13 회원가입, useForm, http 클라이언트 생성, forwardRef 1. useFormreact-hook-form 에서 제공하며, 폼 상태 관리 및 입력값 검증을 간편하게 처리할 수 있다. (폼 데이터 관리 / 유효성 검사 / 폼 제출 처리 / 오류 상태 관리 등) useForm 훅의 리턴값register: 각 입력 필드를 react-hook-form 에 등록 (폼의 데이터를 추적/관리)handleSubmit: 폼 제출 이벤트를 처리하는 함수로 유효성 검사를 통과한 데이터만 전달formState: 폼 관련 상태 정보 제공 1.1. register email 과 password 폼을 register 에 등록하는 코드 스프레드 연산자로 register 를 펼쳐주고 각각 'email', 'password' 라는 이름으로 register 에 등록해준다. required 는.. 2024. 11. 13. [TIL] 11/12 styled-components 모르는 것 정리 1. styled-components 모르는 것 정리 1.1. styled-components 의 중첩 스타일링 스타일링 컴포넌트를 작성할 때 이렇게 중첩으로 스타일링을 작성할 수 있다는 것을 알게 되었다. 컴포넌트 구조와 스타일이 일치하기 때문에 어떤 태그(클래스)에 어떤 스타일링이 적용되었는지 쉽게 알아볼 수 있다. const HeaderStyled = styled.header` .logo { img { width: 250px; } margin: -15px; }`; - 중첩 스타일의 동작 방식 styled-components 는 내부적으로 CSS 클래스를 생성할 때 중첩된 스타일을 컴파일한다. 위의 코드를 컴파일하면 아래와 같이 앞에 유니크한 클래스 이름이 붙어서 생성되.. 2024. 11. 12. 이전 1 2 3 4 5 6 ··· 18 다음 728x90 반응형
