[220620 / Day 32] styled components, react swiper, 게시판 만들기

1. 스타일드 컴포넌트 (styled components)

저번엔 scss, module.css 나갔음

이번엔 styled components 사용해볼 것, css in js 로 js, css 를 같이 사용하는 것임

 

styled compoenets :

- 요즘 리액트 개발 회사에서 많이 사용, 그래서 많이 사용해볼 것, 라이브러리라서 설치하고 사용해야 함, 사스랑 비슷

- 설치법은 terminal 에 npm i styled-components

- 익스텐션에서 vscode-styled-components 깔아줘야 자동완성이 됨

- import 해주기 : import styled from 'styled-components';

- <Box></Box> 는 태그가 아닌 디자인을 위한 컴포넌트

- 랜더되는 함수 안쪽에 작성하면 안됨, 굉장히 느려질 수 있기 때문에 상단이나 하단 바깥쪽에 작성해야 함

- const Box = styled.div → 태그 Box 의 styled 를 div 로 랩핑한다는 뜻, 그리고 바로 그 뒤에 ` `(백틱) 넣어서 거기 안에 속성 넣어주기

- 요소 검사해보면 class="sc-bczRLJ hHPJrx" 이렇게 되어 있는데 이게 스타일드 컴포넌트, 스타일이 다 들어가 있음

 

 

 

2. styled components 문법

 

1) as

- 예를 들어 div 로 랩핑이 아니라 ul 로 하고 싶으면 as 프롭스를 만들고 ul 로 하겠다 선언해주면 됨, 그럼 ul 로 랩핑된 box 가 생성된 걸 볼 수 있음 → <Box as='ul'>

 

2) props 사용 

 <Title fontSize='2rem' color='#2345'>스타일드 컴포넌트</Title>

 <Title fontSize='1.5rem' color='#456'>CSS IN JS</Title>

 <Title color='#745'>fun and easy</Title>

→ 이렇게만 해주면 전달이 안됨

const Title = styled.h2`

    font-size: ${(props) => props.fontSize};

    // 매개변수는 props가 들어오는 거고 따라서 props.fontsize 는 각각 들어가 있는 값으로 출력됨

    color: ${(props => props.color)};

    margin: 1rem 0;

`

// h2 로 하고 title 3개를 다 다르게 스타일을 주고 싶다 근데 각각 주면 귀찮으니까 -> 프롭스를 만들어주기

// 그리고 프롭스를 받아서 각 값을 불러와주는 것

 

3) attrs 사용

- 타입은 버튼이라는 어트리뷰트를 넣고 싶다면 직접 넣어도 되지만 sytled.button.attrs(props => ({})) 해주면 됨 삼항연산자, 조건부 연산자를 하기 위해 이렇게

props.active 값만 가진 애만 클래스 넣어서 스타일 넣기 : className: props.active ? 'btn on' : 'btn'

- 예시 :

const Btn = styled.button.attrs(props => ({

    type: 'button',

    // 원래 태그가 가지고 있는 속성만 적용할 수 있음

 

    className: props.active ? 'btn on' : 'btn',

    // 클래스 이름도 줄 수 있음

    // 그러면 요소검사에서 보면 type 과 classname 이 생긴 걸 볼 수 있음

}))

 

4) 확장

- 다른 요소에서 적용한 스타일을 동일하게 주고 싶다면 확장 기능을 사용하면 됨

- 원래는 const Btn = styled.button 이런 식으로 하면 태그 Btn 의 styled 를 button 으로 랩핑한다고 씀

- 확장 기능은 style(Btn) 해주면 Btn 스타일을 확장하여 사용됨

- 그리고 따로 주고 싶은 style 은 원래했던 것과 똑같이 ` `(백틱) 안에 넣어주면 됨

- 예시 :

const AniBtn = styled(Btn)`

    width: 400px;

    animation: ${colorChange} 1.5s alternate infinite;

`

5) 애니메이션 적용

- import 먼저 : import styled, { keyframes } from 'styled-components'; 해줘야 keyframes 쓸 수 있음

- 그리고 styled 의 animation 에 리터럴 백틱으로 변수 이름을 넣어주고 따로 변수로 keyframes 에 넣을 애니메이션 순서를 작성해주면 적용!

- 예시 :

const colorChange = keyframes`

    0%{

        background-color: salmon;

    }

    100%{

        background-color: seagreen;

    }

`

6) 글로벌 styled 적용

- import { createGlobalStyle } from "styled-components"; 해주고

- const GlobalStyle = createGlobalStyle` `  안에 reset.css 넣어주면 됨

- app.js 에 최상위 컴포넌트로 불러와야 함, 감싼 div 바로 밑에 <GlobalStyle /> 해줘야함

 

7) 그 외는 scss 와 똑같음

 

 

 

2. 스와이퍼

- terminal 에서 npm i swiper 설치

- div 안에 스와이퍼 홈페이지에 있는 Usage 넣어주면 됨 → 기본틀

- navigation 은 js 때 기본적으로 있었지만 리액트는 props 해줘야 함 그리고 import 로 꺼내와야 함

- 반복할거면 스와이퍼 홈페이지에 demo에 보면 loop={true} 해주면 무한 루프

- import 랑 modules 에 쓰는 기능 잘 넣어주고 안 쓰는 기능은 잘 빼주기

 

1) Mainbanner : 무한루프랑 오토플레이, 이동 불릿 해주는 것까지

import { Swiper, SwiperSlide } from 'swiper/react';

import { Navigation, Pagination, Autoplay } from 'swiper';

<Swiper

                modules={[Navigation, Pagination, Autoplay]}

                pagination={{ clickable: true }} // 이동 불릿 생김

                navigation

                loop={true} // 무한 루프

                autoplay={{

                    delay: 2500,

                    disableOnInteraction: false, // 다른 이벤트가 있을 때 멈추도록

                }} // 2.5초씩 이동하게 해주기

                spaceBetween={0} // 슬라이더 사이 마진

                slidesPerView={1} // 한번에 보여지는 슬라이더

                onSlideChange={() => console.log('slide change')} // 슬라이드를 넘길 때마다 호출됨

                onSwiper={(swiper) => console.log(swiper)}

            >

 

2) SubBanner : 썸네일 이미지로 pagination(이동불릿) 바꿔주기

- 두가지 방법 있음 : 클래스 이름으로 바꿔주는 것, 요소검사해서 클래스 네임 보고 거기다가 적용해주면 됨

// swiper 안이 아닌 리턴문 밖에 따로 주고 swiper 안에는 pagination={{ pagination }} 콜백 해주기

    const pagination = {

        clickable: true,

        el: '.pagination-box', // element: 클래스네임 pagination-box(다른 걸로 줘도 상관x)

        renderBullet: function (index, className) {

            return '<span class="' + className + '">' + (index + 1) + "</span>";

        },

    }

<Swiper

                className='mySwiper' // 데모에도 나와있음 쓸 수 있다고, 해주는 이유는 정확한 경로를 위해

                modules={[Navigation, Pagination, Autoplay]}

                pagination={{ pagination }}

                navigation

                loop={true} // 무한 루프

                autoplay={{

                    delay: 2500,

                    disableOnInteraction: false, // 다른 이벤트가 있을 때 멈추도록

                }} // 2.5초씩 이동하게 해주기

                spaceBetween={0} // 슬라이더 사이 마진

                slidesPerView={1} // 한번에 보여지는 슬라이더

                onSlideChange={() => console.log('slide change')} // 슬라이드를 넘길 때마다 호출됨

                onSwiper={(swiper) => console.log(swiper)}

            >

 

3) 이동 화살표 바꾸기

- 직접 바꾸기

- 클래스 이름

 

기본 css 입히면서 position 을 줌 그래서 nav어쩌구 컴포넌트는 position 앱솔루트 주면 자동으로 따라감, 부모요소에 랠러티브 안줘도 됨

 

 

 

3. 게시판 만들기

1) ListTotal.jsx

const [lists, setLists] = useState([]);

    // 데이터는 한번만 불러올거니까 무조건 useeffect

    useEffect(() => {

        fetch('https://jsonplaceholder.typicode.com/posts')

            .then((res) => res.json()) // (res) 변수 이름이니까 아무 이름 써도 됨

            .then((data) => setLists(data)) // (data) 변수 이름이니까 아무 이름 써도 됨

    }, [])

    // async await 안 넣었는데 해줘도 상관 없음

    console.log(lists) // 데이터 100 개 들어옴

→ 데이터 계속 불러오면 랜더링에 무리가니까 한번만 불러오라고 useEffect 사용

→ 원래 데이터 파일 import 해서 변수 지정한 다음 map 으로 돌린 후 함수 호출 과정을 거치는 복잡한 작업을 했었음

→ 그걸 useEffect 로

!!!!!다시 정리

 

2) 게시판 공식

- 게시물 인덱스 0~9, 10~19, 20~29… 해서 페이지당 10개 게시물 보여주는 것

- 게시판 공식이 있음 : 한페이지당 개수와 시작번호와 끝번호를 알아야함

// 게시판 공식

    // 셀렉트 박스 뭐 10개 20개 보이도록 할거면 usestate 로 해야함

    const LIST_PER_PAGE = 10; // 한 장에 보여질 리스트 수

    const [page, setPage] = useState(1) // 페이지, 초기값은 1로 해서 1로 시작

 

    // startNum 은 한페이지 당 시작하는 넘버, endNum 는 한페이지 당 끝나는 넘버

    const startNum = (page - 1) * LIST_PER_PAGE // 1-1*10 => 0 10 20 30...

    const endNum = startNum + LIST_PER_PAGE // 0+10 => 10 20 30 40...

- 1-1x10 → 10은 페이지 개수

 

- disabled 가 뭐지..? 가능하지 않을 때? 더 할 수 없을 때?

 

3) fill 메서드

// 비어있는 걸 채워주는 메서드 fill

    PagesNumArray.fill();

    console.log(PagesNumArray) // (10) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

→ PagesNumArray.fill();

 

 

 

 

과제 : 하나씩 넘어가는 클래스 만들어서 적용해보기, 숫자 클릭하면 하나씩 css 효과 넣기

그리고 5개씩만 페이지수 보여주고 그 다음 누르면 또 5개씩 보이고 이런 것도 해보기 ex) 1,2,3,4,5 다음 6,7,8,9,10