[Elice AI 4기] 7주차 프론트엔드 1. React 기초

SuJeong·2022년 6월 22일
Reactelice
1
post-thumbnail

✔️React 기초

React란?

전통적인 페이지는 클라이언트에서 서버로 HTML을 요청하여 페이지 변경이 필요할 때마다 서버에 다시 요청했었다. 이 과정에서 페이지를 reload하게 된다.

SPA(Single Page Application) 방식은 클라이언트에서 서버로 최초 접속 때만 HTML를 요청하고 이후 변경이 필요한 부분만 AJAX 통신으로 JSON(JavaScript Object *Notation) 형식으로 전달받는다. 그럼 변경된 부분만 다시 그리게 된다.

*Notation : 표기법

React를 사용하면 SPA를 편하게 사용할 수 있다.

React : 사용자 인터페이스를 만들기 위한 JS 라이브러리

React에서 가장 중요한 개념들이 있다.

  • Component : 독립적인 서비스 단위

  • Virtual DOM : 미리 가상적인 변화를 메모리에 저장해두고 실제 DOM과 동기화하여 SPA 이룸

  • JSX : JS에서 HTML 사용

  • Hook : 생산성과 재사용성 높임

  • State : 상태가 변경될 때마다 다시 rendering 됨

JSX

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JS 확장한다. Babel에 의해 Transcompile 되기 때문에 작성하면 자동으로 JS로 컴파일 된다.

const App = () => {
  	// className으로 사용
  	// style은 object로! JS를 사용({})하고 object({})를 사용함
  	// property name은 camelCase로 작성(paddingLeft, FontSize)
	return (
      	<> {/* React.Fragment */} // 최상단 element는 반드시 하나, 주석 없어도 됨, <React.Fragment>로 써도됨
      		<div className="greeting" style={{padding:10, color: 'red'}}>
      			{4+2}</div>  // 연산 가능, 닫는 tag 필수
      		<div>Hello World</div>
      	</>
	)
}

Component

Component를 만들고 자유롭게 활용할 수 있다.

초기의 React의 Component는 모두 Class Component였지만 Function Component와 Hook이 발표되고 나서 최근에는 Function Component가 사용된다.

Class Component는 Java 개발자에게 친숙한 Class 개념이 들어가 있으며, 생명주기를 파악하기는 쉽다.

Component의 Attribute에 해당하는 부분을 Properties의 줄임말로 Props라고 한다. 하위 Element를 children이라고 하고 children도 Props에 해당한다.

Component 끼리 데이터를 주고 받을 때, props를 사용하고 Component 내에서 데이터를 관리할 때는 State를 사용한다. 또한 데이터는 부모에게서 자식에게로만 전달된다.

const MyComponent = (props) => { // 항상 대문자로 시작
  	const { user, color, children } = props // 상위 element에서 props를 전달 받음
 	return <div style={{color}}>
      <p>{user.name}의 하위 element는</p>
      {children}
	</div>
}

const App = () => {
 	return (
    	<div>
      		<p>안녕하세요</p>
      		<MyComponent user={{name:'민수'}}>반가워</MyComponent>
      		<div>안녕히가세요</div>
      	</div>
    )
}

Props

Component에 원하는 값을 넘겨줄 때 사용한다. 변수, 함수, 객체, 배열 등 JS 요소라면 제한이 없다. 재사용을 위해 사용하고 읽기 전용이다!

props의 값을 임의로 변경해서 사용하지 않아야한다. 만약 변경하고 싶다면 새로운 변수를 생성하는 것이 좋다.

Attributes의 특징이다.

  • DOM Element는 camel case로 작성한다(tabIndex, className)
  • data-, aria-(: 접근성과 관련있는 접두어)는 예외(data-type, aria-label )
  • for -> htmlFor, class -> className
  • *checked, value(=기본값은 defaultValue), style(object) 은 html 와는 다른 동작 방식
  • *key, dangerouslySetlnnerHTML(string을 html로)

*checked, value는 HTML에서는 초기값으로 쓰이지만 React에서는 현재 값을 의미한다.

<input type='checkbox' checked={false}/>

checked가 false로 고정되어있으면 사용자가 checkbox를 클릭해도 변화가 없다. 초기값의 의미로 쓰고 싶다면 defaultChecked를 사용해야한다.

*key는 어떤 항목을 식별할 때 사용된다. element에 안정적인 고유성을 부여하기 위해 배열내부의 element에 지정해야한다.

배열 안에서는 형제 사이에서 고유해야하고 전체 범위해서 고유할 필요는 없다. 두개의 다른 배열에서 동일한 key를 사용할 수 있다.

const Names = () => {
 	const names=[
      {key:'1', value:'민수'},
      {key:'2', value:'영희'}    // key가 있으면 명확해지기 때문에 rendering 시간이 줄어든다.
    ]
    return (
    	<div>
       		{names.map((item) => (
      			<li key={item.key}>{item.value}</li>  // key로 명확하게 항목 식별 가능
      		))}
      	</div>
    )
}

State

Component 내에서 유동적으로 변할 수 있는 값을 저장한다. 개발자가 의도한 동작이나 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. State 값이 변경되고 재렌더링이 필요한 경우 react가 자동으로 계산하여 변경된 부분을 렌더링한다.

State 값을 직접 변경하게되면 렌더링할 타이밍을 알아차리지 못하기 때문에, 반드시 setState 함수를 이용해서 값을 변경해야한다.

함수를 이용해서 함수가 현재 값을 기반으로 return하는 값으로 State를 변경하는 방식을 사용한다.

import {useState} from 'react'

function Example() {
 	const [count, setCount] = useState(0) // 초기값은 0
    
    return (
    	<div>
      		<p> 버튼을 {count}번 눌렀습니다.</p>
			<button onClick={() => setCount((current) => {  // 다시 렌더링하기
    			return current+1
    			})>
              	클릭
			</button>
      	</div>
    )
}

object를 갖는 State를 만들때 object 내의 값을 변경하면 감지하지 못한다. object 자체가 변경되는 것이 아니기 때문이다. 새로운 object에 복사하여 담고 변경하면 된다.

const [user, setUser] = useState({name: '민수', grade:1})
setUser((current) => {
  	const newUser = {...current}  // 복사
    newUser.grade=2
  	return newUser
})

✔️JavaScript 최신 문법

const, let

var 대신, 한 번 선언하면 값을 변경할 수 없는 상수는 const로 선언과 변경이 자유로운 let을 사용한다. const로 선언된 변수는 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다.

Array

  • Array.forEach : 배열 요소를 순차적으로 실행하는 method. forEach에서 실행할 콜백함수는 현재 값, 인덱스, 호출할 배열을 매개변수로 갖는다. return이 필요없다.
const arr = [0,1,2]
arr.forEach(function(item) { // 현재값
	console.log(item) //0,1,2  
})
  • Array.map : forEach와 비슷하지만, return을 반드시 해줘야한다.
const arr = [0,1,2]
const newArr = arr.map(function(item) { // 현재값
	return item * 2 //0,2,4
})
  • Array.filter : forEach와 비슷하지만, false를 return할 경우 새로운 배열에서 제외되고 true를 return할 경우 새로운 배열에 추가된다.
const arr = [0,1,2]
const newArr = arr.filter(function(item) { // 현재값
	return item > 1 //2
})

Arrow Function

구문이 짧은 함수 표현으로 function을 생략하고 매개변수를 받은 뒤 => 를 사용하는 형태이다. 중괄호{}를 열어 로직을 작성하고 return 값만 존재하는 짧은 함수의 경우 중괄호와 return을 생략하고 바로 return을 입력할 수도 있다.

const ex = (x) => console.log(x) 
ex(5)

Destructuring Assignment(구조분해할당)

객체나 배열을 해체하여 개별 변수에 담는 표현식이다. 

const ex = {x:1, y:2} 
const {i, j} = ex

const d=[1,2]
const [d0,d1] = d

Shorthand Property Names

객체 선언을 할때 새로 선언하는 object에 key 값과 동일할 경우 value 값을 생략해서 쓸 수 있다.

const person = {username, age:currentAge} // username: username

Spread Syntax

객체나 배열을 전개할 때 사용하는 전개구문이다. 객체의 경우 동일한 key가 있을 경우 나중에 오는 값이 들어간다.

배열의 [], 객체의 {}가 사라진다고 이해하면 편하다.

const nums = [1,2,3]

function getNum(...n) {  // n을 갯수와 관계없이 입력 받기!
 	n.forEacth((item) => {  // 배열
    	console.log(item)
    }
}

getNum(...nums) // 전개해서 매개변수로
  
const newNum = [0, ...nums, 4] // 전개해서 배열로

const user = {name: 'me', age:23}
const newUser = {...user, grade:'A', age:24}  // age는 24

Template literals

표현식을 허용하는 문자열 리터럴이다. 기본적으로 back quote로 감싸 문자열을 표현하고 ${}에 표현식을 표기한다.

const text = `hello ${name}`

Optional chaining

객체나 변수에 연결된 다른 속성을 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있게 해준다. 만일 유효한 속성이 아니면 에러를 발생시키지 않고 undefined를 반환한다. array?.[index]로 사용한다.

const y = a?.b?.c  // a.b.c가 존재하면 가져옴, 없으면 undefined

reference

해당 포스트는 elice 에서 제공하는 강의자료를 바탕으로 작성되었습니다.

profile
SuJeong
backend developer / 꾸준히 배우고 적용하는걸 좋아합니다!
이전 포스트

[번역] Nest 공식문서 - 2. 개요 : 첫 단계

다음 포스트

01. Nest.js 프로젝트 초기 세팅하기

0개의 댓글