[TIL/React] 2023/02/13

styled-components

'styled-components' 설치는 이전에 했으니, 실제로 사용하는 방식을 익혔다.

가장 먼저 styled를 import하는 작업을 선행했다. export 바로 상단에 'MyStyled'라는 변수를 선언하고 'styled' 키워드와 '.', 그리고 '백틱'을 이어서 작성한 뒤, css로 꾸밀 때와 동일하게 적용하고자 하는 내용을 작성했다. 최종적으로 render에서 'MyStyled'를 불러냈다.

해당 코드의 결과는 다음과 같다.

'MyStyled'에 특정 데이터 값을 주고, styled 내부에서 해당 데이터를 props의 형태로 받아오는 작업도 진행했다.

추가적으로 '삼항 연산자'를 활용해봤다.

background color에 true라는 값을 주고 bg color가 존재한다면 빨간색을, 존재하지 않는다면 보라색을 화면에 현출하도록 설정했다. 빨간색이 나와야 정상이다.

관련해서, 마지막으로 SCSS의 'nesting'의 개념을 살펴보았다. SCSS는 CSS를 조금 더 효율적으로 관리하기 위해 나온 언어이다. SCSS의 문법 중 하나인 'nesting'은, 특정 선언을 중첩하는 방식을 취한다.

기존에는 container 내부를 CSS로 꾸며주기 위해 매번 'container'를 작성해야 했다. 반복의 번거로움을 'nesting'을 통해 해결할 수 있다.

'MyStyled'에 임의로 'p 태그'를 추가했다. 하단에서 p와 중괄호를 통해 글자색을 white로 변경했다.

nesting이 잘 적용되었다. 삼항 연산자의 영향으로 'bg_color'가 사라졌기에 배경색은 보라색으로 설정되었다.

hover도 적용해봤다. 커서를 해당 영역에 올리면 배경색이 검정색으로 바뀌도록 설정했다.

버킷리스트에 'styled-components' 적용하기

기존에 'css'를 통해 입힌 style을 모두 'styled-component'로 변환하는 실습을 진행했다.

열심히 따라 하기는 했는데... 뭐 꾸준히 하다 보면 혼자서 구현할 수 있는 그날이 오지 않을까...? 어차피 긍정적으로 생각하는 것 빼고는 달리 방법이 없다 ㅋㅋ 열심히 하자!

회고

이제 대한민국 국민이라면 대다수가 알고 있는, '배달의 민족' 서비스를 제공하고 있는 (주)우아한형제들 이사회 김봉진 의장은 "성공이 아닌 성장을 목표로 하라"라고 청년들에게 조언한 바 있다.

'1만 시간의 법칙'은 누군가에게는 실망으로 다가갈 수 있다. 사람마다 성공이라는 지향점에 도달하기 위한 '우상향의 기울기'가 다르기 때문이다. 성공이라는 결과가 목표가 되면 하루하루 불행하지만, 성장이 목표가 되는 순간 행복해질 수 있다. 어제보다만 나아지면 되기 때문이다. 물론 이것도 지독하게 어렵다.

TIL을 적었다면 어제보다 무언가를 더 배웠다는 것이고, 만족과 불만족 따위의 감정은 기울기에 영향을 주지 않는 요소이다. '성장'에 집중하자. 끔찍한 월요일을 성장으로 점찍은 나 자신 매우 칭찬한다. 내일도 잡념은 무시하고 달리자!