FACTS(사실, 객관) : 내가 한 일
CSS in JS
기존의 css파일을 새로 생성해 그 안에 css를 작성하는 것이 아닌 "styled-components"라는 패키지를 이용해 리액트에서 css in js방식으로 컴포넌트를 꾸미는 방법.
사용방법은, 터미널에 아래 명령어를 입력해 확장프로그램으로 styled-components를 받아주고
yarn add styled-components
jsx파일에 다운받은 패키지를 import한다
import styled from "styled-components";
그러면 바로 사용할 수 있는데
"in JS" 답게 css를 작성하는데 const로 변수도 선언하고, 백틱을 사용한다.
const StyleDiv = styled.div`
width:100px;
`
그리고 여기서 선언한 변수 (StyleDiv)를 태그로 사용하는것.
<StyleDiv> DIV </StyleDiv>
와 정말 신기하다
더 신기한 건 조건부 스타일
css에 if문이나 switch문이나 삼항연산자를 더할수도 있다..
const StyleDiv = styled.div`
width:100px;
background-color: ${(props) => props.divColor};
`
css안에 함수가 들어간다니
와 정말 신기하다
<StyleDiv divColor="black"> black div </StyleDiv>
<StyleDiv divColor="white"> white div </StyleDiv>
이렇게 해주면 클래스나 아이디를 따로 지정하지 않고도 하나의 스타일 정의에서 div의 배경색을 각각 바꿔줄 수 있다
정말 신기하다
----
개인과제 발제 설명에 따라 레포를 만들고 폴더와 파일만 정리하는데 온 시간을 다 썼다
예제코드가 있었는데 스스로 짜보겠다 해서 리스트 불러오는 것 까지 완성함
근데 앞뒤 생각 안한 코드에 전부 꼬여버려서 전부 다 삭제한뒤 객기부리지 않기로 하고 얌전히 예제코드를 불러왔다.. 아직 함수가 들어가지 않아 화면에 아무것도 뜨지 않는데 어떻게 조립해야 할지 잘 생각해봐야겠다
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
지금까지 배운것도 많은데 숙련주차 강의 양은 정말 상상초월이고 !
어떻게든 해야지
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
CSS in JS !!!!!!!!
처음 시작할때 어떻게 할 것인지 생각하면서..
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지