23.02.03-23.02.09 주특기 입문 주차 / React
주간 일정
2월 3일(금) ~21시 S.A과제 회원가입 html 만들고, 배포
2월 9일(목) 10시-12시 입문주차 퀴즈
2월 9일(목) ~21시 개인 입문주차 과제 제출(todo)
2월 9일(목) ~21시 팀 과제 노션 작성 제출
Vitural DOM
메모리에 가상으로 존재하는 DOM
JS의 객체로써 실제 브라우저의 DOM을 보여주는 것보다 속도가 빠르다.
리액트내에서는 업데이트 시 업데이트가 필요한 UI를 Virtual DOM을 통해 렌더링한다.
불변성
불변성 : 메모리에 있는 값을 변경할 수 없는 것
JS내에선 원시데이터는 불변성이 있고, 객체(배열, 함수..)는 불변성이 없다.
이때 리액트에서는 불변성을 지켜주어야 하는데 이유는 다음과 같다.
리액트에서는 화면에 대한 리랜더링여부를 결정할때 state의 변화를 살피게 되고, 이때 state의 변화는 메모리 주소를 통해 비교한다.
따라서 만약 리액트에서 불변성을 지켜주지 않고 직접 수정을 가하게 되면, 값은 바뀌지만 메모리 주소는 그대로인 셈이 되는 것이다.
즉, 리렌더링이 일어나지 않게 된다. (※ 객체를 함부로 바꾸지 마라!)
pop, push, shift, unshift.. : 배열을 직접적으로 수정
map, filter, concat, slice.. : 새로운 배열을 만들어 냄 ⇢ 리액트에서는 얘네를 써야 한다!
Component
부모-자식 Component의 필요성
반복되는 로직에서 필요합니다
반복될 경우 리소스가 늘어나기때문에 자식컴포넌트를 만들어 반복한다
형식
function Child() { // 자식컴포넌트 return <div>나는 자식컴포넌트 입니다.</div> } function Parents() { // 부모 컴포넌트 return <Child /> }
예제 : 할아버지-엄마-자식 3단계로 연결해보자!
▼ 정답
function App() {
return <Grandfa />
}
function Child(){
return <div> i'm child </div>
}
function Mom(){
return <Child />
}
function Grandfa(){
return <Mom />
}
State
setState: 객체를 바꿀 수 있음. 불변성이 강해 객체를 함부로 바꿀 수 없기 때문에 객체를 바꿀때는 꼭 셋스테이트를 이용하자.
props
properties 의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.
예를 들어 아래의 App 컴포넌트에서 Hello 컴포넌트를 사용할때, name이라는 값을 주고자 한다.
APP.js
import React from 'react'; import Hello from './Hello'; function App() { return ( <Hello name="react" /> ); } export default App;
Hello.js
import React from 'react'; function Hello(props) { return <div>안녕하세요 {props.name}</div> } export default Hello;컴포넌트에게 전달되는
props는 파라미터를 통하여 조회 할 수 있다.props는 객체 형태로 전달되며, 만약name값을 조회하고 싶다면props.name을 조회하면 된다.
export / export default
두 가지 모두 모듈을 내보내고 부르는 방식이다. 이때, 모듈의 경우 크게 다음과 같은 두가지로 분류된다. 보통의 경우 2번의 모듈을 사용한다.
- 복수의 함수가 있는 라이브러리 형태의 모듈
- 개체 하나만 선언되어있는 모듈
export의 경우 중괄호{}를 필수로 붙여 모듈을 가져와야 한다.
export default의 경우 [해당 모듈에는 개체가 하나만 있다]는 사실을 나타내며, 중괄호가 없어도 모듈을 가지고 올 수 있다. 또한 파일단 하나만 있으므로 이 개체를 가져오려는 모듈에선 이름이 없어도 괜찮다.
(즉, default가 없다면 개체에 이름이 없는 경우 에러가 발생한다.)
예시
import { User } from … / export class User {...}
import User from … / export default class User {...}
