2주차 : JSX와 Styled Component

Milk717·2022년 10월 11일

AppCenter React

AppCenter Web Study

목록 보기

1/3

0. React란?

리액트는 페이스북이 만든 SPA(Single Page Application)에서 사용자 인터페이스를 만들기 위한 라이브러리이다.

0. 리액트의 특징

0.1 Virtual Dom

DOM이란?
- Document Object Model로 문서 객체 모델을 의미한다.
- 여기서 Document Object(문서 객체)는 html문서 태그들을 Javascript가 이용할 수 있는 object로 만든 것을 말한다.
- 따라서 DOM이란 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜서 트리구조로 만든 객체 모델이다.
- DOM tree 구조
- DOM은 HTML과 스크립팅 언어인 Javascript를 서로 이어주는 역할을 한다

브라우저 렌더링 과정
1. 웹 브라우저가 HTML 문서를 네트워크를 통해 전달받음
2. 브라우저의 렌더링 엔진이 HTML파싱 후 Dom Tree를 만든다
3. CSS파일 또한 파싱돼서 스타일 트리가 생성된다
4. 웹 페이지에 변경사항이 생기면 리플로우, 리페인트 과정이 일어난다.
  a. 리플로우 : 렌더트리 재생성, 레이아웃 과정
  b. 리페인트 : 페인팅 과정 재수행
5. Attachmemt과정에서 트리의 노드들이 갖고있는 attach 메소드가 호출돼 스타일 정보를 계산하고 결과값을 객체 형태로 반환한다.
6. 레이아웃 과정에서 각 요소의 정확한 위치와 크기를 구한다.
7. 페인팅 과정에서 렌더트리의 각 노드를 화면의 실제 픽셀로 변환한다.
Virtual Dom 이란?
- DOM을 추상화한 가상의 객체로 메모리에 적재되어 있기 때문에 속도가 빠르다.
- 변경 사항이 DOM에서 직접 수정되는 것이 아니라 Virtual Dom에 반영된 후 변경된 부분만 실제 DOM에 반영된다.
가상 돔을 사용하는 이유
- 웹 애플리케이션에서 데이터에 변경 사항이 있을 때 DOM에 직접 접근해서 변화를 준다면 성능 이슈가 발생한다. DOM자체에 읽고 쓰는 성능은 자바스크립트 객체를 처리할 때의 성능과 비교해서 다르지 않지만, DOM에 변화가 일어나면 웹브라우저가 페이지 전체를 다시 랜더링해야하기 때문에 시간이 오래걸린다.

0.2 Component 기반

0.3 JSX

아래에서 자세히 알아보겠습니다.

1. JSX

1.1 JSX는 무엇일까?

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법으로 React에서 UI관련 로직을 작성할 때 사용한다.
JSX로 작성된 코드는 번들링 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 변환된다.

1.1.1 JSX 사용 예시

jsx를 사용하지 않았을 때

function App(){
	return React.createElement('h1', null, `Hello, React`);
}

jsx를 사용할 때

function App(){
	return (
		<h1>Hello, React</h1>
	);
}

1.2 JSX를 사용할 때 주의점

1.2.1 감싸인 요소

Virtual Dom에서 컴포넌트 변화를 감지할 때 효율적으로 비교해야 하기 때문에 하나의 component는 하나의 DOM트리 구조로 이루어져야 한다.

잘못된 코드

올바른 코드1 (div 사용)

function App(){
	return (
		<h1>Hello, React</h1>
		<h1>Bye, React</h1>
	);
}

function App(){
	return (
		<div>
			<h1>Hello, React</h1>
			<h1>Bye, React</h1>
		</div>
	);
}

올바른 코드2 (React.Fragment 사용)

function App(){
	return (
		<React.Fragment>
			<h1>Hello, React</h1>
			<h1>Bye, React</h1>
		</React.Fragment>
	);
}

React.Fragment 는 <> </> (빈 태그)와 동일한 기능을 수행한다.

여러 자식을 그룹화 할 때 div나 React.Fragment중 어느것을 사용해도 상관없지만 Fragment를 사용하는 편이 더 좋다. 자세한 이유는 아래 문서 참고

Fragments - React

1.2.2 닫힌 태그

HTML에서 input 태그처럼 닫지 않아도 되는 경우가 있지만, JSX에서는 반드시 클로징 태그를 써줘야한다.

잘못된 코드

function App(){
	return (
		<>
			<h1>Hello, React</h1>
			<input type="text">
		</>
	);
}

올바른 코드

function App(){
	return (
		<>
			<h1>Hello, React</h1>
			<input type="text"/>
		</>
	);
}

1.2.3 어떤 태그라도 self-closing tag가 가능하다.

<div></div> == <div/>

1.3 JSX 문법

1.3.1 자바스크립트 표현식 사용하는법

JSX 코드 내에서 {}로 감싸주면 자바스크립트 표현식을 사용할 수 있다.

function App(){
	const name = 'Sumin';
	return (
		<>
			<h1>Hello, React</h1>
			<p>내 이름은 {name}</p>
		</>
	);
}

1.3.2 inline style 넣는법

카멜 표기법으로 작성해야 한다 (font-size ⇒ fontSize)
가장 바깥 중괄호는 JSX에서 자바스크립트 표현식을 넣을 때 여는 중괄호이다. 이 안에 스타일 객체를 넣기 때문에 중괄호가 중첩된다.

function App(){
	return (
		<>
			<h1 style={{fontSize: '20px'}}>Hello, React</h1>
		</>
	);
}

1.3.3 주석 넣는법

HTML : <!— 주석 —>
JSX : {/*주석*/}

2. Styled Component

2.1 Styled Component란?

기존에 스타일링 하던 방식인 css, scss는 style 파일을 바깥에 따로 두고, class이름이나 id 등을 이용해서 styled을 입혔다면 styled-component는 동일한 컴포넌트 안에 컴포넌트별 스타일을 선언할 수 있다.
css를 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않게 만들어준다.

2.2 Styled Component 사용하기

2.2.1 Styled Component 설치

npm install styled-components

2.2.2 Styled Component 사용 예시

import styled from 'styled-components';

const ButtonWrap = styled.div`
    width: 200px;
    padding: 20px;
    background: ${props => props.toggle ? "pink" : "purple"};
`;

const Button = styled.button`
    color: ${props => props.color || "red"}
`;

export const StyledComponentTest = () =>{
    return(
        <>
            <ButtonWrap toggle={false}>
                <Button color="blue">버튼입니다</Button>
            </ButtonWrap><ButtonWrap toggle={true}>
                <Button>버튼입니다</Button>
            </ButtonWrap>
        </>
    );
}