React

React 소개

React란?

• 페이스북이 만든 사용자 UI 구축을 위한 라이브러리

특징

• Component 기반
• Virtual DOM 사용
• JSX 문법 사용

프레임워크 vs 라이브러리

• 제어의 흐름 권한이 누구에게 있는가?
  • 컴퓨터에게 있음: 프레임워크
  • 나에게 있음: 라이브러리
• 공통점
  • 코드 재사용 가능
  • 프로그래밍이 쉬워짐

프레임워크

• 일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미
• 개발 시 필수적인 기능을 제공
• 개발자는 프레임워크가 정해준 방식을 따라야 함
• Angular, Vue.js, Spring, Django 등

라이브러리

• 특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합
• React, jQuery, tensorflow, pandas 등

React 특징 - 1

Component 기반

• 사용자가 정의한 태그를 의미
  • 태그처럼 생긴 함수
• 코드를 기능별로 나눠서 작성
• 빠르고 효율적인 화면 구성 가능
• 코드의 재사용성 및 유지보수가 편리

React 특징 - 2

Virtual DOM 사용

• 빠른 화면 출력 속도
• 수정이 되지 않은 태그는 건드리지 않고 수정된 태그만 수정해서 재로드
• cf) jQuery를 이용한 화면 구성
  • 간결한 코드로 화면 구성 가능
  • 화면의 일부분만 수정되어도 화면 전체를 다시 그려야 함

React 특징 - 3

JSX 문법 사용

• 자바스크립트 안에서 HTML 문법을 사용하여 view를 구성할 수 있도록 도와주는 문법
• 화면에만 집중해서 개발할 수 있음

function HelloMessage({ name }) {
	return <div>Hello {name}</div>;
}

ReactDOM.render(
	<HelloMessage name='Soo' />,
	document.getElementById('root')
);

React 프로젝트 생성

create-react-app 명령어로 프로젝트 생성

• 프로젝트 이름: react-app

$ npx create-react-app react-app

• 실제 코딩하는 대부분의 파일은 src에 위치

react 개발환경 실행

$ npm start

JSX 문법

JSX란?

JSX(JavaScript XML)

• 자바스크립트에 XML을 추가한 확장형 문법
• 특징
  • 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어서 편리함
  • 개발자는 화면에만 집중해서 개발 가능
  • 리액트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변환시켜서 작동시킴
• 예시

const element = <h1>Hello!</h1>;

JSX를 사용하는 이유

• 코드량 감소

  

  • 리액트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변환

    

• 가독성 향상

  • 중첩된 선언형 구조를 잘 나타냄

• 팀의 생산성 향상

  • HTML과 비슷하여 전문 개발자가 아니더라도 직접 코드 수정 가능

React 동작 원리

작성된 코드를 리액트가 자바스크립트를 이용하여 해석

• src/index.js 파일

리액트가 화면을 그리는 방식

• 추가 및 제거되는 element(tag)만 업데이트

JSX 문법 작성 규칙

1. 반드시 하나의 부모 태그로 감싸는 형태여야 함

• 에러 발생 코드

function App() {
	return (
		<div>안녕하세요.</div>
		<div>정수아입니다.</div>
	);
}

• 정상 작성 코드

function App() {
	return (
		<div>
			<div>안녕하세요.</div>
			<div>정수아입니다.</div>
		</div>
	);
}

• 의미 없는 태그인 경우, <> </> 이렇게 작성 가능

function App() {
	return (
		<>
			<div>안녕하세요.</div>
			<div>정수아입니다.</div>
		</>
	);
}

2. 자바스크립트 표현식은 {} 괄호로 감싸는 형태여야 함

function App() {
// 자바스크립트 코딩은 여기에
	const name = 'Sooa'
		return (
			// 페이지의 구조만 잡음
			<div>
				<div>안녕하세요.</div>
				<div>{name}</div>
			</div>
		);
}

3. if, for과 같은 구문은 사용할 수 없음

• 자바스크립트 표현식이 아니기 때문
  • return 밖에서는 사용 가능
• 방법 1) 조건부 연산자(삼항 연산자)를 사용

function App() {
	const name = 'Sooa'
		return (
			<div>
				{/* 자바스크립트 표현식이기 때문에 {}로 묶음 */}
				{ name === 'Sooa' ? (<h1>선생님</h1>) : (<h1>학생</h1>) }
			</div>
		);
}

• 방법 2) AND 연산자(&&)를 사용

  • 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 경우에 사용

    function App() {
    	const name = 'Sooa'
    		return (
    			<div>
    				{ name === 'Sooa' ? (<h1>선생님</h1>) : null }
    			</div>
    		);
    }

    function App() {
    	const name = 'Sooa'
    		return (
    			<div>
    				{/* 조건이 false면 아무것도 출력하지 않음 */}
    				{ name === 'Sooa' && <h1>선생님</h1> }
    			</div>
    		);
    }

4. HTML 태그는 반드시 닫아야 함

• XML 마크업 규칙을 따르기 때문
• HTML의 경우 다음 태그들은 닫지 않아도 됨
  • <img> , <br> , <input> 등
  • JSX의 경우 태그를 닫지 않으면 에러 발생

function App() {
	return (
		<div>
			<div>안녕하세요.</div>
			<img src="logo512.png"> 
		</div>
	);
}

5. class 대신 className을 사용

• class는 자바스크립트의 예약어이기 때문에 사용할 수 없음
• JSX에서는 className을 사용해야 함

function App() {
	const name = 'Sooa'
		return (
			<div className="myclass">
				<div>안녕하세요.</div>
				<div>{name}</div>
			</div>
		);
}

6. CSS Style

• JSX에서 태그에 style을 적용할 때는 객체 형태로 작성
• 속성 이름은 카멜 표기법으로 작성

function App() {
	const name = 'Sooa'
	const style = {
		backgroundColor : 'red',
		fontSize : '12px'
	}
	return (
		<div style={style}>
			<div>안녕하세요.</div>
			<div>{name}</div>
		</div>
	);
}

7. 주석

• JSX 내에서는 {/…/}와 같은 형식으로 사용

function App() {
	const name = 'Sooa'
		return (
			<div>
				{/* 주석 사용 방법 */}
				<div>안녕하세요.</div>
				<div>{name}</div>
			</div>
		);
}

컴포넌트

컴포넌트란?

기존 웹 프레임워크 동작 방식

• MVC 패턴
• 코드 재활용이 어려움 (서로의 연결고리가 끈끈하기 때문)

컴포넌트

• 한 개만 만들면 원하는만큼 가져와서 사용할 수 있음
• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 특징
  • UI를 독립적으로 구성하여 재사용 가능
  • 기존 컴포넌트를 통해 새로운 컴포넌트를 쉽게 생성 가능
• 구성
  • 프로퍼티(props)
  • state
  • 컨텍스트
• 선언 방식

  • 함수형 컴포넌트

    function Welcome() {
    	return <h1>Hello</h1>;
    }

  • 클래스형 컴포넌트

    class Welcome extends React.Component {
    	render() {
    		return <h1>Hello</h1>;
    	}
    }

컴포넌트 생성 및 사용

TodaysPlan 컴포넌트 생성

• src/TodaysPlan.js

import React from 'react';

function TodaysPlan() {
	return (
		<div className='message-container'>
			놀러가자
		</div>
	);
};

export default TodaysPlan;

TodaysPlan 컴포넌트 사용

• src/App.js

import TodaysPlan from './TodaysPlan';

function App(){
	return (
		<>
			<TodaysPlan/>
		</>
	);
}

export default App;

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 6주차 블로그 포스팅