[TIL] D+57 리액트 숙련 시작...?

1️⃣ 리액트 숙련 1주차

Styled component 부터

📌 CSS-in-JS

<기존에 배운 스타일을 지정하는 방법>

1. 태그에 직접 스타일 속성을 지정해주기

2. HTML처럼 className을 지정해서 css를 지정해주는 방법

 

이것보다 간단한 방법이 CSS-in-JS이다.

자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.

기존의 방식에서는 style을 작성할 때 조건문 등의 로직을 적용할 수 없었는데

이 방식을 사용하면 style 적용 시에도 조건문,변수 등 다양한 로직을 이용할 수 있다.

 

CSS-in-JS를 사용하기 위해서는

우선 터미널에 아래 명령을 입력하여 패키지를 설치한다.

yarn add styled-components

 

그리고 VSCode에서 아래 플러그인을 설치해야한다.

 

styled components(이하 sc)의 기본적인 원리는

꾸미고자 하는 컴포넌트를 sc의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행한다.

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import 합니다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div`
	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
  return <StBox>박스</StBox>;
};

export default App;

 

---

 

.

.

.

우선 여기까지 강의를 들었는데

조건부 스타일링과 Switch문과 map을 사용해서 리팩토링 하는 내용이 나오니까 급 어려워졌다...

 

입문 강의도 제대로 이해 못했는데 숙련 강의를 듣는게 무슨 의미가 있을까 싶어서

새로운 강의를 더 듣기보다는 입문 강의 내용을 복습해야겠다는 생각을 했다 !!!

 

근데 코딩 공부를 하는 방법을 모르겠어서 검색해보니까 방법은 다양했다

코드 한 줄 한 줄 해석해서 주석 달며 공부하라는 분도 있었고

기존 코드의 변수를 바꿔서 직접 코드를 쳐보라는 분도 있었다...

우선 두 가지 방법을 다 참고해서 해봐야징ㅇ

 

그래서 노마드코더?? 강의 봣음

 

 

---

2️⃣ 디자인 집중반

UI 집중반 과제 & 크리틱

 

 

긴말 않겠습니다...

UI 집중반 겁나 힘드네여🩷

 

오늘 1차 피드백 받고 수정 우다다다 하고

2차 피드백도 받았는데 고칠 거 적어서 통과~!!!

 

통과라고 함은... 다음 과제 레쓰고 ^.^ㅎㅎ

 

 

아 오늘 금요일인줄 알고 WIL 써야지 생각하고 있었음 ;;

---

느낀 점, 새롭게 깨달은 것💡

- 뭔가 열심히 하니까 하루가 굉장히 빨리 간다... 

오늘의 잘한 점🥰

- 코딩도 디자인도 열심히 했당... ^_ㅠ 이거했다가 저거했다가 하니까 정신 1나도 없음

오늘의 문제점,부족한 것😵‍💫

- UI 집중반 과제할 때 아이콘 종류가 넘 많다고 2~3개로 줄이라는 말씀을 하셨는데... 뭘 바꿔도 이상해서 멘붕옴 어찌저찌 해결되긴 했는데 나중에 디자인할 때는 이런 걸 잘 고려해야겠다ㅠㅠ...

해결방법👊

- 아이콘 그리는 연습 해야되나..?