React (1)

llsh·2022년 3월 31일

React

React란 사용자 인터페이스를 만드는 JavaScript 라이브러리이다.

React build

npx create-react-app appName

React 특징

접근 방식

React는 선언적 접근 방식을 따른다.

선언적 접근 방식 vs 명령형 접근 방식

// 명령적
let imperative = 'How'
// 선언적
let declarative = 'What'

👉 실생활에서의 예: 식당에 가서 테이블에 앉을 경우

명령형 접근 : 테이블이 비어있는것을 확인하고 직원에게 다가가서 저기 비어있는 테이블에 2명 앉을게요!
선언적 접근 : 직원에게 2명이요!

이처럼 명령적 접근 방식은 어떻게 테이블에 앉는지가 중점이고 선언적 접근 방식은 2인용 테이블에 중점을 두고 있다.

명령형 접근 방식

let arr = [1,2,3,4,5]
function doubble(arr){
	let res = [] 
	for(let i=0; i<arr.length; i++){
		res.push(arr[i] * 2)
    }
    return res
}

function add(arr){
	let res = 0 
    for(let i=0; i<arr.length; i++){
    	res += arr[i]
    }
    return res 
}

const btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
	btn.classList.toggle('highlight')
    btn.innerText === 'Add Highlight'
    	? btn.innerText = 'Remove Highlight'
        : btn.innerText = 'Add Highlight'
})

What 보다 How를 중점으로 둔다 (원하는 기능을 구현하는 방법에 대한 단계를 명시적으로 배치)

선언적 접근 방식

let arr = [1,2,3,4,5]
function doubble(arr){
	return arr.map((item)=>item*2)
}

function add(arr){
	return arr.reduce((total,number)=>number + total, 0)
}

<Btn />

How 보다 What에 중점을 둔다 (우리는 map,reduce안에서 무슨 일이 일어 나는지 모른다)
가독성이 높다 (map,reduce가 무슨 역할을 하는지 알면)

선언적 코드의 또 다른 장점은
프로그램이 컨텍스트에 독립적일 수 있다는 것이다.
즉, 코드는 단계보다 궁극적인 목표에 관심이 있기 때문에 동일 코드가 다른 프로그램에서도 제대로 작동할 수 있게 된다.
명령형 코드는 현재 상태의 컨텍스트에 의존하는 경우가 많기 때문에 프로그램이 컨텍스트에 독립적이기 어렵다.

컴포넌트 기반

리액트는 모두 컴포넌트로 구성되어 있고 이때, 컴포넌트는 하나의 기능만 하게 잘게 쪼개서 관리하는게 좋다.
컴포넌트 단위로 개발하기 때문에 재사용성이 좋다.
컴포넌트는 처음 시작단어와 새로운 단어 사이에는 대문자를 사용한다

JSX

JSX는 JavaScript를 확장한 문법이다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람들은 JSX를 사용한다.

function App(){
	return (
    	<div>Hello</div>
        )
}

JSX 규칙

컴포넌트에 여러 요소가 있다면 반드시 래핑 태그가 필요하다.
<React.Fragment> 또는 <> 사용해줘야 한다.

	// true
    function App(){
    	return(
        	<>
            	<div>Hi</div>
                <div>HIHIHI</div>
            </>
        )
    }
    // false
    function App(){
    	return(
        	<div>Hi</div>
            <div>HIHIHI</div>
        )
    }

자바스크립트 표현
{}를 사용하여 JSX 내부에서 사용가능 이때 로직은 JSX안에서 사용하지 않고 변수나 상수로 입력하는게 깔끔하고 좋다.

function App(){
	const month = new Date().getMonth()
    return (<div>{month}</div>)
}

JSX없이 React 사용하기

만약 JSX없이 React를 사용한다면 엄청..불편하다.
React.createElement(component, props, ...children)는 항상 하나의 root 엘리먼트를 만든 다음에 사용한다.(JSX에서 래핑 태그가 필요한 이유)

//false
function App(){
	return (
    React.createElement('div',{},'HI')
    React.createElement('h2', {}, "HELLO")
    )
}

//true
function App(){
	return(
      React.createElement(
        "div",
        {},
        React.createElement("div", {}, "HI"),
        React.createElement("h2", {}, "Heooooo")
      )
    )
}

props

props를 통해 컴포넌트간 데이터 이동이 가능하다

const expenses = [
    {
      id: "e1",
      title: "Toilet Paper",
      amount: 94.12,
      date: new Date(2020, 7, 14),
    }
 ]

// 컴포넌트 A
function App(){
	return (
    	<Expenses item={expenses}/>
    )
}

// 컴포넌트 B
function Expenses({title,amount,date})
	return(
    	<div>{title}<div>
    )

props.children

props.children는 래핑한 태그의 콘텐츠를 의미한다
아래의 예제에서는 Card로 래핑한 태그 안의 콘텐츠 모두를 의미한다.

function Card(props){
	const classes = 'card ' + props.className
    function Card(props) {
    	return <div className={classes}>{props.children}</div>;
	}
    
 <Card className="name">
 	<h2>Name<h2>
 </Card>
}