Week.01 JSX & emotion

rlatjsdn147·2022년 5월 15일
0

Posting

목록 보기
1/56

Nextjs

React 라이브러리의 프레임워크이다.
어차피 무슨말인지도 잘 모르는 수준이므로 넘어가도록 하자.

자바스크립트를 편하게 쓸 수있게 해준다던 react 를 사용한다면서 왜또 Nextjs가 추가 된걸까.. 라는 생각이들어 검색을 해봤다.

이해할 수 있는 수준으로 설명을 해보자면 html, css, js파일등을 모아서 실제로 웹 페이지를 사용자의 눈에 보이게 그려주는(또는 만들어내는) 과정을 "렌더링" 이라고 하는데 Nextjs가 렌더링하는 방식이 react가 렌더링하는 과정보다 빠르다고 한다.

어쨌든 Code.camp FE 과정에 들어오기 전, 약간(정말 약간) html, css, js 공부를 했었는데.

기존과는 다르게 리액트에서 사용하는 html, css 는 각각 JSX, emotion 이라고 다른이름을 사용했다.

간단한 예시를 들어보자.

기존 html

<div class = "first_posting"> 첫날의 포스팅입니다.</div>

JSX

<div className = "title"> 이것도 첫날의 포스팅입니다.</div>

......?

뭐가 다른건가 싶긴하지만 나름대로 차이점이 있긴하다. CamelCase라고 하는데, 매 단어의 시작마다 대문자를 쓰는 것이다. 중간중간 대문자가 튀어나온 모습이 낙타의 혹을 연상 시킨다고해서 붙혀진 이름이라고 한다.

기존 css

.title {
	width : 100%;
    height : auto;
    }

emotion

const title = styled.div`
	width : 100%;
    height : auto;
 `

역시나 뭐가 다른건가 싶고 너무 짧은 예시이긴 하지만, 태그에 의미를 부여할 수있기 때문에, 가독성이 좀 더 뛰어나다 정도로 생각하면 되겠다.

profile
생각은 나중에..

0개의 댓글