쿠쿠하마

리액트에서 CSS를 사용하는 방법은 여러 가지가 있습니다.

그중에서 제가 이번에 설명드리고자 하는 것들은

1) 단순 인라인(inline) 스타일 적용 법

2) SASS 파일 스타일 적용법 (css-module 방식)

3) css-in-js 스타일 적용법적용 법 중에 하나인, 스타일 컴포넌트(styled-component) 적용 법

자 그러면 1번부터 차근차근 적어보겠습니다.

1) 단순 인라인(inline) 스타일 적용 법

인라인 스타일 적용 법이란, 무식하게 바로 태그가 선언된 그 자리에서 바로 스타일을 주는 겁니다.  때로는 간단하게 바로 먹일 수 있어서 쓰는 사람도 있어요 간단한 프로젝트에서는요. 그런데 하더라도 일부만 하지 전부다 하지는 않습니다. 한 번 수정사항이 생기면 일이이 다 수정해줘야 합니다.

<app.js 파일>

1-1) 인라인 스타일 적용법이란 위와 같이 바로 HTML 태그 속성 안에 바로 때려 넣는 것을 의미합니다.

흔히 가장 안 좋은 방법이다.라고 배웁니다. 심플하지만, 역시 어느 정도만 되는 프로젝트에도 저런 식으로 하게 되면 뭐 하나 수정할 때마다 일이이 전부 다 고쳐줘야 하므로, 힘듭니다.

1-2) 인라인 스타일 적용은 가장 높은 우선순위를 갖습니다.

이게 어떤 의미냐면, 다른 방법으로 같은 HTML 태그에 스타일을 줬지만, 이렇게 또 인라인 스타일을 주게 되면, 인라인 스타일이 최종적으로 적용되어서, 만약에 중복되는 스타일 속성이 있다면 이것으로 덮어 써집니다.

1-3) style = {{ }} 이렇게 중괄호를 두 번 해야 한다는 점을 유의해주세요.

또한 기존 스타일 속성 중에 border-style 이런 것처럼 중간에 "-" 대시가 들어가는 속성명이 있을 겁니다.

그런 속 성명 들은 리액트에서는 대시가 빠지고 대신 그다음 단어의 첫 글자를 대문자로 표기합니다. 위에서도 "borderStyle"로 되어있죠?

이것은 원래 리액트의 주된 표기방식은 카멜 표기법이기 때문입니다. 

2) SASS 파일 스타일 적용 법( = css-module 방식 )

CSS파일을 따로 두고, 모아 두고 임포트 해서 스타일을 적용하는 방식입니다. 기존 html-js-css로만 사이트를 만들던 때랑 비슷하죠.

<customDiv.scss 파일>

<colors.scss 파일>

<App.js 파일>

2-1) 제일 먼저 sass 파일을 쓰기 위해선 관련 노드 모듈부터 설치해줘야 합니다.

npm i node-sass를 현재 react루트 폴더 안에서 ( package.json파일이 있는 곳 ) 실행하시면 됩니다.

참고로 npm i는 npm install의 약어입니다.

2-2) 위 사진을 참고하시면서 보시면, css파일이나 scss파일을 임포트하고 적용하고 싶은 컴포넌트의 클래스 네임이랑 scss파일에서 정의한 클래스 네임이랑 동일하게 맞춰주면 해당 CSS가 적용됩니다.

2-3) 다만 대부분 classNames라는 모듈을 설치하고 쓰시는데요. 클래스 네임 모듈을 쓰면, 일이이 사용자가 클래스 이름 명명을 하지 않고, 고민 없이 유니크한 클래스 이름을 얻을 수 있습니다. 편해서 쓰는 겁니다.

명령어로는 npm i classnames

3) 스타일 컴포넌트 적용 법

제가 자주 쓰는 방식입니다. 일터에서도 아마 따로 CSS팀이 없다면, 스타일 컴포넌트로 할 것 같습니다. 개발자들에게는 이게 훨씬 편하니깐요.

스타일을 주기 위해 따로. css파일이나,. scss파일이 없어도 됩니다.

스타일까지 javascript로 바로 먹이는 방식입니다.

그냥 리액트의 컴포넌트를 작성과 동시에, 스타일을 먹일 수 있는 방식입니다.

<App.js 파일 상단> (App.js에다 한꺼번에 썼는데, 길어서 상/하단으로 나눠서 찍었습니다.)

3-1) 먼저 styled-components 모듈 설치를 해야 합니다. 루트 폴더 안에서 다음 명령으로 설치합니다.

npm i styled-components

그리고 js파일에서 다음과 같이 모듈을 불러와서 사용합니다.

import styled from 'styled-components';

styled는 본인이 알아서 명명하면 되지만, 대체로 그냥 styled로 씁니다.

3-2) 컴포넌트를 변수 생성하듯이 const 키워드로 합니다. 주의하실 점은 컴포넌트 명명법을 지켜야 한다는 것입니다.

컴포넌트를 이름 지을 때는 무조건 대문자로 시작해야 합니다.

3-3) 스타일을 고정으로 줄 뿐만 아니라, props값을 통해 전달받은 값으로 유동적으로 스타일을 줄 수 있습니다.

위의 코드와 주석을 잘 살펴보세요.

<App.js 파일 하단> 

3-4) 위에서 만든 컴포넌트는 바로 이렇게 App.js에서 사용할 수 있습니다.

첫 번째 Div에는 float에 left를 주었고. 두 번째 Div에는 아무것도 주지 않았으니 none으로 처리되겠네요.

이상 React에 CSS를 주는 방법을 대략적으로, 깔끔히 정리해봤습니다. 뭔가 부족한 점이 있다면 댓글로 남겨주세요.

안녕하세요. 새롭게 카테고리를 하나 더 팠어요.

저는 아직 30대이지만, 어려서부터 부모님을 위해서 건강 관련 정보들을 많이 봐왔어요. 그리고, 저한테도 늘 적용시켰죠. (건강은 나이 불문, 모두에게 중요한 것이니깐요.)

그런데 친구들이랑 이야기를 하다보면, 생각보다 건강에 대해서 기초 상식도 모르는 친구들이 있더군요.

(혹은 약 복용시 기초 상식들 있죠? 예를 들면 술 먹은 날에 타이레놀 먹지 말라. 간에 안 좋다. 이런 것들이요. )

요즘 들어서 자주 드는 생각이, 건강은 젊어서부터 챙기는 것이 무조건 좋다.입니다.

게다가 우리에겐 장수해야 할 이유가 한 가지 더 있습니다. 언젠간 컴퓨터가 더 발달할 것이고, 생물학적으로 수명이 다해 죽는 날이 와도, 나의 뇌 속에 있는 모든 정보들을 클라우드 인공지능 데이터 안에 넣고 의식적으로는 계속 생각을 할 수 있는 날이 올지도 몰라요. 물론 아직 멀었습니다... 하지만 제가 지금 30대인데, 70대쯤 80대쯤 되면 반드시 나오리라 믿습니다.

이러한 이유로 새롭게 '얼리 안티-에이징' 카테고리를 만들었습니다.

건강은 한번 잃으면 다시 찾기가 어렵습니다. 잃기 전에, 정보를 알고 있어야 하고, 실천해야 합니다.

모두 '얼리 안티-에이징' 하세요. 피부에만 극한 되어 있는 것이 아닙니다. 건강을 지키기 위해선 반드시 젊을 때부터 안티 에이징 하는 습관을 만들어놔야 합니다.

이거는 반드시 그냥 외워야 할 것들 입니다.

"현재 → 과거" 입니다. 과거분사 아닙니다.

(물론 과거와 과거분사가 동일한 단어들이 있죠.)

be (am/are/is) → was/were

become → became

bet → bet

blow → blew

bring → brought

build → built

break → broke

bite → bit

begin → began

catch → caught

come → came

cut → cut

cost → cost

choose → chose

drink → drank

drive → drove

draw → drew

dig → dug

do → did

eat → ate

feel → felt

find → found

forget → forgot

freeze → froze

fly → flew

fight → fought

fall → fell

get → got

go → went

grow → grew

give → gave

hang → hung

hear → heard

hit → hit

hurt → hurt

hold → held

hide → hid

have → had

know → knew

keep → kept

let → let

lose → lost

leave → left

make → made

meet → met

mean → meant

pay → paid

quit → quit

ride → rode

read → read

ring → rang

run → ran

sell → sold

shake → shook

shut → shut

sing → sang

sleep → slept

spend → spent

stick → stuck

swim → swam

swing → swang

sweep → swept

stand → stood

speak → spoke

sit → sat

sink → sank

shoot → shot

send → sent

see → saw

take → took

tell → told

think → thought

teach → taught

throw → threw

wake → woke

win → won

write → wrote

wear → wore

understand → understood

Sentence stuctures에 대해서 알아봅시다.

문장은 제목에 있는 대로, 3가지 종류가 있습니다.

한가지씩 간단히 알아봅시다.

근데 그 전에 한가지 알아야 할 것이 있어요.

clauses : 절 ( 주어 + 동사 )

Independent clauses : 이 하나의 절만으로 뜻이 완벽한 절

예를 들어

"나는 지금 컴퓨터를 한다." >>> 완변한 절이죠? 나는 지금 무엇을 하는지 완벽히 알 수 있어요.

"내가 지금 하고 있는 것은 / 컴퓨터를 하는 것이다."  >>>  절이 2개 있는데, 서로 떨어뜨려놓고 각각 읽게되면 무슨 소리인지 모르겠죠?

이렇듯, 어떤 절이 있어도 그 절 하나만으로는 문장 이해가 안되는 것은 불안전한절 입니다. 영어로는 Dependent Clauses 입니다.

자 다시 깔끔하게 정리하면,

Independent Clauses : 독립절 : 이 절 하나만으로 의미가 있습니다.

Dependent Clauses : 의존절 : 이절 하나만으로는 의미 전달이 어렵습니다.

독립절 조건 3개

1. 주어

2. 동사

3. 완전한 의미 전달 ( complete idea )

자 이제 원래 설명할려고 했던 3개의 문장 종류에 대해서 알아봅시다.

1. Simple Sentence : 1 주어 + 1 동사 + 완전한 의미 전달

You and me are the most powerfull combination.

하나의 주어, 하나의 동사가 있고, 하나의 완전한 의미를 전달한다면, 일반적인 간단 문장이라고 할 수 있습니다.

어 근데 위에서 독립절을 배웠었죠? 그리고 따지고 보면 독립절도 위와 같은 조건입니다. 네 맞습니다.

Simple Sentence = 독립절 입니다.(제가 알기로는) 다만 상황에 따라 이름을 다르게 부르는 것 같아요.

2. Compound Sentence : 최소 독립절 2개 이상이 접속사로 이어진 문장.

I need new computer so I'm going to buy computer.

독립절 2개가 so 라는 접속사에 의해서 연결되어 있습니다.

여기서 접속사란 다음과 같습니다. 외우기 쉽게 FANBOYS 를 외우세요!

for, and, nor, but, or, yet, so

3. Complex Sentence : 독립절 1 + 의존절 1 가 합쳐진 문장.

If you say that what your name to me, I'll think about my grand-child's name. 

(만약 너가 너의 이름이 뭐냐고 나에게 말한다면, 나는 내 손자 이름을 생각할거야.)

앞에 절은 의존절입니다. 뒤에 절은 독립절이죠. 앞에 절은 "만약 너가 너의 이름이 뭐냐고 나에게 말한다면," 입니다. 뜻이 완전하지 않죠. 따라서 의존절입니다. 

참고로, 저렇게 의존절이 앞으로 오게되면 콤마로 찍어줘야 합니다.

반대로 이렇게 순서를 바꾸면,

I'll think about my grand-child's name if you say that what your name to me

콤마를 안찍어도 됩니다.

미래 시제를 표현하는 방법에 대해서 알아봅시다. 버로 본론 들어갑니다.

1. will

만약 계획되어 있거나, 어느정도 미리 생각해두고 있는 미래를 표현하려면 will을 쓰면 안됩니다.

만약 즉흥적으로 말하는 당시에 선택을 하거나 의지를 표현한 것이라면, 가능합니다.

will이 잘 안쓰이는 이유는, 잘 생각해보면 우리는 미래에 대해서 이야기할 때, "어느정도 계획"을 가지고 있습니다. 그래서 자연스럽게 미래에 대해서 이야기 할 때 will은 거의 쓰이지 않습니다.

그럼 일반적으로는 어떻게 표현하는가? 다음을 보시면 됩니다.

2. be going to

I am going to study tomorrow.

나는 내일 공부 할거야. ( 어느정도 스스로가 예정된 계획임을 뜻합니다. 지금 말하는 당시의 즉흥적인 선택이 아닙니다.)

이것이 일반적인 표현이지만, 이것보다 더 자주 쓰이는 표현은 바로, "현재진행형"입니다.

"현재진행형"이라는 이름때문에, 미래시제에 대해 표현한다는 것에 대해 반감이 드시겠죠...

다음을 봅시다.

3. be ~ing + 시간표현   (= 현재 진행형)

I am studying tomorrow.   (나는 내일 공부를 할거야.)

여기서 포인트는 + 시간표현 입니다.

시간표현이 부사로써 붙어 있지 않으면 저 문장은 여러분이 알고계시는 그냥 현재 진행형이 됩니다.

하지만 만약 시간표현이 붙었다? 그럼 그건 미래시제입니다.

여기 원어민들은 일반적으로 미래시제를 현재진행형+시간표현으로 말합니다.

will은 잘 쓰지 않아요. 순간순간 선택하거나 말하는 순간에 정하는 것을 will로 표현합니다.

4. 스케쥴 같이 딱 정해져 있는 루틴은 => 현재형

가장 쉬운예로 버스 도착 시간표가 있습니다.

This bus leave at 1:00 pm. (이 버스는 오후 1시에 출발할꺼야.)

미래를 표현한 거지만, 스케쥴 같이 정해져있는 루틴을 반복해서 따르는 것들은 그냥 현재형으로 표현합니다.

오랜만에 산책 하네요.

차만 있으면 동네 공원이 곳곳에 있기 때문에 시간을 많이 투자하지 않아도 숲속?을 경험해 보실 수 있습니다.

(잘못하면 곰도 경험해 보실 수 있으니 조심하세요. 다만 문디 공원에는 곰 조심 표지판이 없는걸 보면, 곰이 살지는 않나봐요. 하지만 가끔 큰 공원같은데 가면 곰 조심하라고 경고판이 있어요.)

저는 시간이 없어서, 짧게 Mundy Lake 까지만 갔다가, 다시 돌아왔습니다.

요즘 사람들이 많이 오는 것 같아요. 조깅하시는분들이 특히 많더군요.

강아지도 끌고 오시는 분 많이 봤습니다. 다만 가다보면 못들어가는 길이 있어요. 그런 길들만 피해서 가면 가능합니다. 중간중간 쓰레기통도 보이고요.

화장실은 어디 있을 거 같긴한데 전 못봤습니다. 입구 부터 Mundy Lake까지 가는 길에서는요.

그럼 사진 보시죠.

나무가 많죠.. 그리고 근접인 사진이 많은 이유는.. 사람이 많이 다녀서 입니다.. 배경으로 의도치 않게 나온다 하더라도, 에티켓에 어긋나기 때문에 어쩔 수 없이 사람을 피해 찍다 보니 근접이 많네요.

하지만 마지막 호수를 찍은 사진은 그럴듯 하죠?

맨 마지막 사진은 저렇게 강아지 목줄을 달면 지나갈 수 있는 곳과, 아예 강아지와 같이 들어갈 수 없는 길목이 있다는 것을 보여드리기 위해 찍었어요.

마지막으로 호수가에서 잠깐 찍은 영상입니다.