23.01.20 - React 기초

1. React

프론트엔드 개발을 위한 자바스크립트 오픈 소스 라이브러리. 

 

 

📂 React의 특징

 

• 선언형(Declarative)
  
  • 코드를 분석하지 않고도 의도를 이해할 수 있음. => 명시적인 코드 작성
  • 한 페이지를 구현할때 html / css / js를 나눠서 작성하는 것이 아닌, JSX를 활용한 선언형 프로그래밍을 지향함
• 컴포넌트 기반(Component-Based)
  
  • 컴포넌트(Component) : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것
  • 리액트는 기능 구현을 위해 컴포넌트를 기반으로 애플리케이션을 개발함
  • 컴포넌트로 분리시, 각각의 컴포넌트가 독립적이고 재사용이 가능하다.
    => 각 기능 자체에 집중하여 개발 가능. 유지보수가 편해지고 컴포넌트간 의존성은 줄어듬.
• 범용성(Learn Once, Write Anywhere)
  • 리액트는 자바스크립트 라이브러리임
    => 자바스크립트를 사용하는 프로젝트라면 어디에든 유연하게 적용할 수 있음. 
  • 안정적임 / 많은 사람이 사용하고 있음 / 모바일 개발도 가능(React Native)

 

 

🤔 왜 꼭 React를 사용해야 하지? 

 

• UI를 이전보다 쉽게 구현할 수 있음
• 자바스크립트 문법을 기반으로 사용하기 때문에 따로 공부할 문법들이 적음
• 사용하는 사람들이 많기 때문에 참고할 수 있는 레퍼런스가 많음
• 컴포넌트 기반으로 개발이 가능함 => 재사용이 쉬운 코드로 개발 가능!
• React Native를 통해 모바일 개발도 가능함 

 

 

1) React 개요

(1) JSX

JavaScript XML. 자바스크립트를 확장한 문법. React에서 UI를 구성할때 사용한다. 

React는 DOM과는 다르게 CSS와 JSX 문법만으로 마크업 형태의 코드를 작성하여 DOM에 배치하고, 웹 애플리케이션을 개발할 수 있다. 이를 통해 컴포넌트를 구현하기 위한 파일이 줄어들고 코드를 한눈에 확인하는것이 쉬워진다. 

주의해야 할 점은, JSX는 자바스크립트가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 코드가 아니라는 것이다. 

따라서 브라우저가 작성된 코드를 이해할 수 있도록 변환해주는 과정이 필요하다.

=> Babel을 사용해 컴파일 한다. 

 

Babel을 통해 JSX를 브라우저가 이해할 수 있는 자바스크립트 코드로 컴파일 해줄 수 있다. 

컴파일이 되면 브라우저가 코드를 읽고 화면에 렌더링 하는 것이 가능해진다. 

 

 

🤔 JSX를 꼭 써야만 하나요? 

 

DOM에서 JavaScript와 함께 사용할때

=> JavaScript와 HTML을 인라인 방식 / 스크립트 태그 등으로 연결해주어야 함.

 

React 사용

=> JSX를 이용해 JavaScript와 HTML을 동시에 사용함으로 기능과 구조를 한눈에 확인할 수 있음.

=> 더 명시적인 코드를 작성할 수 있다! 

 

JSX 없이 React 요소를 만들 수도 있지만 코드가 더 복잡해지고 가독성이 떨어진다. 

 

 

📂 JSX 문법

 

1. 여러 엘리먼트를 작성할 경우, 최상위에서 opening tag와 closing tag로 감싸준다.

브라우저에서 별도의 엘리먼트로 나타나지 않는 Fragment를 사용할수도 있다. 

태그는 꼭 닫힌태그로 작성한다. 태그와 태그 사이에 내용이 들어가지 않을때도 self closing tag 형태로 작성한다. 

// 태그는 꼭 닫아주기
// X
<div> 
<input> 
<br> 

// O
<div></div> 
<input /> // 태그와 태그 사이에 내용이 들어가지 않을때 Self Closing 태그로 닫아줌
<br/>

// 태그는 최상위에서 감싸줄것
// X
<Component1 />
<Component2 />

// O
<div>
	<Component1 />
	<Component2 />
</div>

// 또는
<>
	<Component1 />
	<Component2 />
</>
// <></> => Fragment. 브라우저에서 별도의 엘리먼트로 나타나지 않음.

 

 

2. CSS class 속성을 지정할때는 className으로 표기해야한다. class로 표기할경우 JavaScript의 class로 받아들인다. 

인라인 스타일을 지정해줄때는 객체 형태로 작성하고, 속성들은 camelCase 형태로 네이밍한다.

const style = {
	backgroundColor: 'black',
	color: 'pink',
	fontSize: 24, // 기본 단위는 px
	padding: '1rem' // 다른 단위 사용시에는 문자열로 설정
}

return (
	<>
		<div style={style}>인라인 스타일</div>
        <div className="blue-box">css class 추가</div>
	</>
)

 

 

3. JSX 내부에서 자바스크립트를 사용할때는 중괄호를 사용해야 한다. 중괄호가 없을 경우 일반 텍스트로 인식한다. 

<div>{name}</div>

 

 

4. 사용자가 정의하는 컴포넌트들은 대문자로 시작해야한다. (Pascal Case). 소문자로 시작할 경우 일반 HTML 엘리먼트로 인식한다. 

// X
const hello() = () => {
	return <div>틀렸음</div>
}

// O
const Hello() = () => {
	return <div>컴포넌트의 이름은 대문자로 작성</div>
}

 

 

5. 조건부 렌더링은 if문이 아닌 삼항연산자를 사용한다. if문은 표현식(값으로 평가될 수 있는것)이 아니기 때문에 사용할 수 없다. 

const isTrue = 1 + 1 === 2 ? 'true' : false;

{ isSpecial ? <b>*</b> : null}
// null, false, undefined를 렌더링 하면 아무것도 나타나지 않는다.

 

 

6. 여러개의 엘리먼트를 표시할때는 map() 메서드를 사용한다. 이때, 반드시 key 속성을 넣어주어야 한다. 

function Blog() {
  const blogs = posts.map((post) => (
    <div key={post.id}> // key 속성을 넣어주어야 한다 
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

 

 

7. 주석은 아래와 같은 형태로 작성한다. 

{/* JSX에서 주석을 작성하는 방법 */}
<div>
	// 열린 태그 내부에서는 이렇게 작성하기
</div>

 

 

(2) map 사용하기

나타내야 하는 데이터가 적을 때에는 하드 코딩으로 직접 모든 데이터를 코드에 작성할 수도 있다. 

그러나 데이터가 계속 늘어날 수도 있다면 하드코딩은 효율적인 방법은 아니다. 

리액트는 이런 문제를 배열 메서드 .map()을 활용해 해결할 수 있다. 

 

.map() 메서드는 배열의 각 요소를 특정한 함수을 적용해 다른 요소로 지정하는 메서드이다. 

만약, map을 통해 반복적으로 작성해야 하는 부분들만 골라 배열의 요소로 넣게 된다면 리액트는 이를 인지하고 배열의 모든 요소를 렌더링한다. 즉 컴포넌트를 재사용성 있게 만들고 단순 반복되는 코드를 간결하게 작성할 수 있는 것이다. 

 

이렇게 return 문 안에서 사용할 수도 있고, 가독성을 위해 변수로 추출하거나 인라인 형태로 넣을 수도 있다. 

function UserList({users}) {
    return (
        <div>
            {users.map((user, index) => (
                <User user={user} key={index} />
            ))}
        </div>
    )
}

 

 

 

만약 key 속성이 없을 경우, 리스트의 항목에 key를 넣어야 한다는 경고가 나타난다. 

key 속성은 map 메서드 내부의 첫 엘리먼트에 넣어주면 된다. 

 

 

🤔 key 속성이 꼭 있어야 하는건가? 

 

key 속성값은 가능하면 데이터에서 제공하는 id를 할당해주면 된다.

key는 id와 마찬가지로 변하지 않고 예상 가능하며 유일해야한다.

어쩔수없는 경우에는 배열 인덱스를 사용할 수 있지만, 배열 인덱스는 최후의 수단으로만 사용한다. 

인덱스를 사용할 경우, 데이터가 추가 또는 삭제 되었을때 전체적인 변화가 생기고 성능이 저하되거나 컴포넌트에 저장된 값에 문제가 생길 수 있다. 

리스트 항목에 명시적인 key를 지정하지 않으면 리액트는 기본적으로 인덱스를 키로 사용하기 때문에, 이때는 반드시 고유한 key 값을 지정해주어야 한다. 

 

 

(3) Component

컴포넌트(Component)는 하나의 기능 구현을 위한 여러 종류의 코드 묶음으로, UI를 구성하는 필수적인 요소이다. 

컴포넌트를 여러개 만들어 조합하면 어플리케이션을 만들 수 있다. 

모든 리액트 애플리케이션은 최소 한개의 컴포넌트를 가지고 있고 이 컴포넌트는 애플리케이션 내의 근원(root)가 되는 역할을 한다. 이 최상위 컴포넌트는 다른 자식 컴포넌트를 가질 수 있고, 이러한 계층적 구조(hierarchy)를 트리 구조로 형상화할수있다. 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당한다. 이러한 컴포넌트들을 한데 모아 복잡한 UI를 구성할 수도 있고, 최종적으로는 복잡한 애플리케이션도 만들 수있다. 

 

 

📂 컴포넌트 기반 개발의 장점

애플리케이션의 구조를 바꿔야할때 

- html / css / js로 개발했을 경우

: html로 구조를 바꾸고, css를 수정하고, 변경된 구조와 디자인에 맞춰 js의 dom 조작 로직을 수정한다. 

 

- 리액트를 이용한 컴포넌트 기반으로 개발했을경우 

: 변경하려는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정한다. 

=> 유지보수가 쉽다. 

 

 

2) Create React App

리액트 SPA(Single Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. 

배포용 웹 어플리케이션을 위해서는 많은 node.js 패키지들이 필요하고, 이 다양한 툴들의 모든 작동원리를 이해하기는 어렵기 때문에 리액트에서 create-react-app을 통해 복잡한 개발세팅을 간단하게 할 수 있다. 

npx create-react-app@latest 폴더이름

 

 

 

 

****************

요약정리 & 일일회고

 

리액트의 3가지 특징은 각각 선언형, 컴포넌트기반, 범용성이다. 

리액트는 코드를 JSX를 통해 선언적으로 작성함으로 명시적인 코드 작성이 가능하다. 

또한 컴포넌트 기반의 개발이 가능하기때문에 유지보수가 쉽고 재사용성이 있는 코드를 작성할 수 있다. 

리액트는 자바스크립트 기반의 라이브러리이므로 자바스크립트가 사용되는 프로젝트라면 추가해서 사용할 수 있다. 

 

JSX는 HTML과 자바스크립트를 함께 작성할 수 있으므로 코드를 한눈에 보기 쉬워 명시적인 코드 작성이 가능하다. 

JSX에는 몇가지 규칙이 있는데, 2개 이상의 태그는 반드시 최상위 태그로 감싸줘야한다는 것, css class의 경우 className을 사용한다는 것, 컴포넌트 이름은 대문자로 시작해야한다는것 등이 있다. 

 

리액트 컴포넌트는 컴포넌트별로 기능들을 구현해 유지보수가 쉽고 재사용성이 높다. 

 

Create react app은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. 

배포용 웹 애플리케이션을 만들기 위해서는 다양한 패키지들이 필요한데, create react app을 사용하면 복잡한 개발세팅을 간단하게 할 수 있다. 

 

***

 

드디어 리액트 첫시간...! 오랜만에 해서 조금은 헷갈리기도 한다. 

이렇게 말하니까 되게 잘하는것같은데... 사실 잘 못함 

기본적인 부분들을 다시 배웠으니까 연휴에 다시 복습해보려고 한다. 

이번 연휴에는 지난 섹션들과 이것저것 놓친것들을 다시 돌아보고 공부해보려고 하는데 다 할수있을지 모르겠다...ㅠ.ㅠ

그래도 어쨌든 일단 해보자