리액트를 공부하며 배운것의 기록 : 까먹기 전에 복습을 하기 위해, 보완점이 무엇인지 회상하기 위해 정리한다.
UseState
기본 형태 : const [count, setCount] = useState(0);
- count : 상태 값 저장 변수
- setCount : 상태 값 갱신 함수 (인자로 초기 state값을 하나 받는다.)
- useState : 상태 초기 값
UseState는 가장 기본적인 Hook이다. , 함수형 컴포넌트에서 가변적인 상태를 지닌다.
즉, 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 UseState를 사용하자!
근데 Hook이 뭔데?
Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수이다.
useState는 현재의 state 값과 이 값을 업데이트 하는 함수를 쌍으로 제공한다.
import React, { useState } from 'react';
function Example() {
// "count"라는 새로운 상태 값을 정의합니다.
const [count, setCount] = useState(0);
return <div></div>;
}-
하나의
useState함수는 하나의 상태 값만 관리를 할 수 있다. -
컴포넌트에서 관리해야 할 상태가 여러개라면
useState를 여러번 사용하거나 -
배열구조분해(destructuring)문법으로 여러 state 변수를 선언해 사용 하는 방법도 있다.
UseEffect
기본 형태 : useEffect(function, [des])
- function : 수행하고자 하는 작업
- des : 배열 형태(검사 하고자 하는 특정 값 || 빈 배열)
Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 side effects를 수행 할 수 있게 해준다.
side effects가 뭔데?
React 컴포넌트 안에서 데이터를 가져오거나, 구독하고, DOM을 직접 조작하며 REact 컴포넌트가 화면에 렌더링이 된 이후, 비동기로 처리돼야 하는 이런 모든 동작을 "side effects(=effects)"라고 한다.
화면에 일단 렌더링 할 수 있는 것은 먼저 렌더링을 하고, 실제 데이터는 비동기로 가져오는 것이 권장된다.
Why? => 요청 즉시 1차 렌더링을 하면서 연동하는 API 호출이 늦어지거나, 응답이 없을경우 영향을 최소화 시킬 수 있기 때문
UseEffect의 사용 방법
1. Component가 mount 됐을 때 (처음 렌더링 될 때)
useEffect(() => {
console.log('첫 렌더링 될 때만 실행됩니다.');
}, []);2. Component의 특정 값만 update 될 때 (name가 업데이트 될 때만 실행하고 싶을 때)
useEffect(() => {
console.log('첫 렌더링 될 때만 실행됩니다.');
}, [name]);- 검사하고 싶은 값만 넣어주면 된다!
즉, useEffect는 기본적으로 렌더링이 되고 난 이후 실행되며, 두번째 파라미터 배열에 어떤 값을 넣느냐에 따라 실행되는 조건이 달라진다.
곁들임
JSX
JSX란 무엇일까?
-
JavaScriptXmL은 Javascript에 XML을 추가하여 확장한 문법이다.
-
리액트로 프로젝트를 개발할 때 사용되고, 공식적인 JS 문법은 아니다.
-
브라우저에서 실행하기 전에
바벨을 사용하여 일반 JS 형태의 코드로 변환한다.
- 실제 작성한 JSX의 예시
const element = (
<h1> className="greeting">
Hello, world!
</h1>
);- 위와 같이 작성하면, 바벨이 다음과 같이 JS로 해석한다.
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};React 엘리먼트: 화면에서 보고 싶은 것을 나타내는 표현 => 라고 부르기도 한다.
Props
Props란?
-
프로퍼티, Props(properties의 줄임말)이다.
-
부모 컴포넌트가=>자식 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름) -
수정할 수 없다는 특징이다. (props는 읽기 전용) => 순수 함수처럼 동작
-
문자열을 전달할 때는
큰따옴표("")를, 이외 값은중괄호({})를 사용한다.
App.js
import React from 'react';
import myName from "./myName.js"
function App() {
return (
<div className="App">
<Reset />
<myName name="woogie" />
</div>
);
}
export default App;myName.js
import React from 'react'
function myName(props) {
return <h1>Hello, {props.name}</h1>;
}
export default GetName;-
App.js에
name이라는 props를 "woogie"라는 값으로 넘겨주고 -
myName.js에서 정의한
name을props.name으로 사용해서 -
화면에 "Hello, woogie"가 출력이 된다.
비구조화 할당
- myName.js + 비구조화 할당 (객체에서 값을 추출하는 문법)
import React from 'react'
function myName({props}) {
return <h1>Hello, {name}</h1>;
}
export default GetName;props.name을 비구조화 할당으로 => name으로 변경
