728x90 반응형 Styled-Components4 [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/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. [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+JS/리액트] 웹 스터디 5주차 리액트 라우터: 기본 라우팅 html 과 js 를 사용해서 웹 페이지를 만들면 페이지 별로 html 이 존재하지만, 리액트에서는 한 개의 index.html 을 사용하여 웹페이지를 만든다. 이게 무슨 말이냐 하면 html 과 js 를 이용했을 때는 다른 페이지로 이동해야 해야하면 html 파일 자체를 바꾸어 줬지만(index.html -> detail.html 이런 식으로), 리액트는 index.html 파일은 놔두고 안에 내용을 바꾸어 준다는 것이다. 리액트에서 페이지를 나눌 때 외부 라이브러리인 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이기 때문에 react-router-dom 을 설치해서 사용하기로 했다. react-router-dom 은 터미널을 열.. 2024. 5. 23. 이전 1 다음 728x90 반응형
