지난 글에서는 React 프로젝트를 생성했고, 이번에는 기본 세팅과 JSX를 정리합니다. 이후에는 TodoList를 만들 예정입니다. 세팅 방법은 사람마다 다르기 때문에, 더 좋은 방법이 있다면 댓글로 알려 주세요.

---

1. React 셋팅

처음 프로젝트를 생성하면 아래처럼 기본 파일이 만들어집니다. TodoList까지 진행할 예정이라 불필요한 파일은 지우고 폴더를 나눴습니다.

스타일은 styled-components로 작성할 예정이라 CSS 파일을 포함해 위 사진처럼 기본 파일을 모두 지웠습니다. styled-components는 아래에서 자세히 설명합니다.

그다음 App.js 파일을 열면

이런 모습입니다. 태그는 익숙하지만 파일 형태는 낯선데, 이것이 바로 JSX입니다. JSX에 대한 설명은 아래에 간단히 정리해 두었으니, JSX가 처음이라면 먼저 읽고 따라 하는 것을 추천합니다.

2. Styled Components

Style components란?

• 대표적인 Css in Js입니다.
• CSS in JS는 스타일을 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 작성하는 방식입니다.

적용을 하기 전에 잠깐 알아가는 시간

styled-components를 쓰지 않으면 어떻게 작성할까요?

// Inline Style CSS 형식이 있고
 render() {        
   const tempStyle={        
   display:"inline-block",        
   width:"100px",        
   height:"100px",        
   boder:"1px solid black",        
   background:"orange",    
 }    
 return (        
   <Fragment>           
   	<div style={tempStyle}></div>        
   </Fragment>    
   );  
 }}
 
 
 // Import Style CSS 형식이 있습니다.
 import styles from './App.css';
 return (        
   <Fragment>           
   	<div className={styles.box} ></div>
   </Fragment>    
   );  
 }}
 
 ./App.css
 .box{ 
 	display:"inline-block",        
   width:"100px",        
   height:"100px",        
   boder:"1px solid black",        
   background:"orange",  
 }

상황에 따라 동적으로 바뀌는 스타일을 만들고 싶어서 styled-components를 선택했습니다.

2-1 적용하는 방법

// yarn을 설치하신 분은 터미널에 아래 코드를 입력해 주세요
$ yarn add styled-components

// yarn을 설치하지 않으신 분은 터미널에 아래 코드를 입력해 주세요
$ npm install styled-components

모듈을 설치한 뒤, 사용할 곳에서 import해서 사용하면 됩니다. 위 코드처럼 HTML과 CSS를 분리하지 않고, 스타일을 컴포넌트로 선언해서 꺼내 쓰는 방식이 인상 깊었습니다. 사용법을 조금 더 살펴보면

// 기본적인 styled-components 작성법
const 컴포넌트명 = styled.태그명`
기존 css에서 작성하듯이 스타일 정의
`

// 동적인 styled-components 작성법
const StyledButton = styled.button`
  color: ${(props) => props.color || "gray"}; 
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background}>
      {children}
    </StyledButton>
  );
}

이렇게 작성하면 추상화하기 편하고(개인적인 의견입니다), CSS에 props를 전달할 수 있어 스타일을 더 동적으로 줄 수 있습니다.

3. JSX란?

JSX란?

• JSX(JavaScript XML)는 JavaScript에 XML을 추가한 확장 문법입니다.
• JSX는 React 개발에 사용되는 문법이며, 공식 JavaScript 문법은 아닙니다.
• 브라우저에서 실행되기 전에 Babel을 통해 일반 JavaScript 코드로 변환됩니다.

JSX를 작성할 때 주의할 점이 몇 가지 있습니다.

1. 태그 닫기

import React from 'react';

const App = () => {
	return (
    	<>
    		<input type="text"> // 오류 생김
        	<input type="text"/> // 올바른 예시
        </>
    );
}

HTML5에서는 일부 태그를 닫지 않아도 동작하지만, JSX는 XHTML처럼 모든 태그를 반드시 닫아야 합니다. 평소 태그를 닫는 습관이 있다면 크게 문제 되지 않습니다.

2. 태그 중복 사용

import React from 'react';

// 오류코드
const App = () => {
	return (
    	<div>중복태그</div>
        <div>중복태그</div>
    );
}

// 올바른 예시
const App = () => {
	return (
        <> // <fragment> === <>
			<div>중복태그</div>
			<div>중복태그</div>
		<>
	);
}

Vue에서 <template> 안에 최상위 요소가 하나가 아니면 에러가 나는 것과 같은 원리로 보입니다. JSX는 앞으로 계속 쓰게 될 문법이라 따로 공부해 두는 것이 좋습니다.

세팅과 JSX 정리는 여기까지이고, 다음 글에서는 TodoList를 만들어 보겠습니다.