20240805. TIL

오늘은 React 기본개념 test 오답노트와 SASS의 개념과 사용법을 간단하게 알아보고자 한다

✔️ SASS (Syntactically Awesome Style Sheets)

- 직역하자면, 문법적으로 멋진 스타일 시트

- 기존의 CSS의 단점을 보완하고 효율성을 높이기 위해서 만들어진 CSS 전처리기

- 중첩, 변수, 속성 재사용등 여러 가지 기능을 제공한다.

- SASS와 SCSS는 함께 언급되곤 하는데 SCSS는 SASS3 버전에서 등장해 호환성과 가독성을 한껏 높인 것이라고 보면 된다.

- SASS는 들여쓰기를 사용, SCSS는 { } (중괄호)와 ; (세미콜론)을 사용한다는 점에서 차이점을 보인다.

➡️ 주로 SCSS로 수업을 진행 중이므로 SCSS 기준으로 작성하겠습니다.

데이터 종류와 그에 따른 사용 방법

➡️ 이 자료형들은 속성값으로 사용할 수 있는데, 그중 눈여겨봐야 할 종류는 List와 Map이다.

Lists : 일종의 배열, 속성값으로 여러 데이터들을 가질 때 내부의 데이터들을 , (쉼표) 또는 (공백)으로 구분하여, 데이터들을 소괄호( )로 묶어서 사용한다.
Maps : List와 비슷하지만, 내부의 데이터들이 키:값의 쌍으로 이루어져 집합의 형태를 띄고 있고 소괄호( )로 묶어서 사용한다.

✔️ 변수란?

- 반복적으로 사용되는 코드를 변수에 저장해 꺼내 쓸 수 있도록 했다.

➡️ 변수의 이름에 속성값이 드러날 수 있도록 작성하면 속성값을 한눈에 파악이 가능하다.

➡️ 변수의 속성만 바꾸면 변수를 사용한 코드가 전체적으로 바뀌기 때문에 유지보수가 쉬워진다.

➡️ 재사용성과 가독성 ⬆️ / 스타일링의 통일성 ⬆️

변수의 선언과 사용 방법

$변수이름 : 변수에 들어갈 값;

//폰트의 크기
$font-mid: 50px;
$font-sml: 30px;

//폰트의 두께
$font-bold: 900;
$font-thin: 200;

//색상 값
$color-darkgreen: rgb(22, 43, 30);

// 예시
div {
	font-size : $font-mid;
	font-weight : $font-bold;
	color : $color-darkgreen;
}

✔️ 중첩이란?

- HTML의 계층방식과 동일하게 CSS 요소를 중첩하여 작성하는 것

- 요소를 중복적으로 사용하지 않고 직관적으로 보일 수 있게 작성

➡️ 구조화와 가독성이 높아지고 유지보수가 쉬워진다.

- 기존의 CSS는 각각의 요소를 중괄호{ }를 이용하여 구분하던 것과는 달리

SCSS에서는 부모요소의 중괄호{ }안에 자식요소를 넣어 중복사용을 줄일 수 있다.

예시

➡️ 기존 CSS 코드 : container의 자식요소로 ul이 있고, 각각의 요소를 따로따로 선택하여 속성을 부여했다

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: black;
}

.container ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

➡️ SCSS의 중첩을 이용한 코드 : container의 자식요소로 ul이 있고, container의 { } 안에 자식요소 ul을 작성, 속성을 부여한다

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: black;
  ul {
    display: flex;
	  justify-content: center;
	  align-items: center;
  }
}

💡 오답노트

A. 컴포넌트의 상태를 초기화 하기 위해 ➡️ useState

B. 사이드 이펙트를 수행하기 위해 ➡️ useEffect (정답)

C. 컴포넌트를 비동기로 렌더링하기 위해 ➡️ conponent Life Cycle / React18 이후 : Suspense

D. 컴포넌트의 스타일을 적용하기 위해 ➡️ Styled Component

D. 모두 올바르다.

➡️ useRef는 매겨변수로 모든 유형의 값을 받는다. (정답)

initialValue: 참조 객체의 속성에 처음에 지정할 값 current이다.

모든 유형의 값이 될 수 있으며이 인수는 초기 렌더링 후 무시된다. - React 공식 홈페이지

저번주 React 첫 수업을 들었을 때, 무슨 말인지 몰라 아리송할 때가 많았는데,
VOD강의를 처음부터 끝까지 2-3번 반복해서 듣다 보니
조금씩 이해가 가는 스스로가 조금 신기하게 느껴지기도 했던 한 주였었다.
(추가로 조교님들께서 push 해주신 과제와 추가 실습자료도 한몫했다.)

그 결과로 시험에서 2문제만 틀리는 쾌거를 이룬 것 같아서 조금 어깨가 으쓱해지는 하루였다.

'조금씩 성장한 나 자신 기특해!'

참고자료

https://ko.react.dev/learn/preserving-and-resetting-state (React 공식 홈페이지)

https://react.dev/reference/react/useRef#useref (React공식 홈페이지)

https://medium.com/@dropyourcoffee/더욱-간편해진-react-에서의-비동기-처리-suspense-사용-후기-75009572497a (Junoh Jung, Medium.com)

https://velog.io/@kbpark9898/함수형-컴포넌트에서의-초기-상태-초기화 (박기범, 벨로그)

https://velog.io/@dev_grit/React-Styled-Component의-모든-것 (그릿 Grit, 벨로그)

https://www.heropy.dev/p/Y7OrPe (HEROPY, HEROPY.DEV)