하루에 한 챕터도 못하는 날이 많아서 n일차보다는 n번째로 하는게 나을거같네요 리액트가 참 알아야할게 많습니다
React 라이브러리에 무슨 기능이 있는지 보려면~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<script type="text/babel">
console.log(React)
</script>
</body>
</html>콘솔을 찍어보면 된다.
React의 다양한 기능 중에 가장 중요하다고 생각되는 개념 (내 판단)
React Hooks의 대표적인 기능 useState, useEffect, useReducer, useContext 를 간단하게 정리 해보겠습니다
먼저 Hooks 가 무엇인지 에 대한 설명.
0. props
Props란 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달하고자 할 때 사용하는 개념이다. 이때 전달하는 데이터는 하나의 값일수도 있고 함수일수도 있다.
아마도 properties (속성) 의 약자가 아닐까 ???
App.js
import React from 'react';
import PropsTest from './PropsTest';
// 상위 컴포넌트 App 에서 하위 컴포넌트 PropsTest 에게 props 전달 중
const App = () => {
return(
<>
<PropsTest name="이대엽" />
</>
);
};
export default App;
PropsTest.js
import React from "react";
const PropsTest = ({ name }) => {
return <h2>{name}님 어서오세요!</h2>;
};
export default PropsTest;PropsTest.js는 상위 컴포넌트인 App.js로 부터 name값을 전달 받아 사용하고 있다.
1. useState
State란 컴포넌트 내부에서 가지고 있는 해당 컴포넌트의 상태 값들을 의미한다.
사용 형태
const [ 변수 , set변수 ] = useState(변수의 초기값)
const [ count , setCount ] = useState( 0 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 버전은 명시 상관x standalone 가능 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
함수형 컴포넌트 에서는 state를 사용할 수 없었음.
<script type="text/babel">
const {useState} = React;
// const Say = () => {}
function Say() {
console.log(useState('기본상태'));
let val = 0; // 상태값이 하나라도 바뀌면 Say 컴포넌트가 새로 렌더링 되면서 계속 0으로 초기화 됨
// 배열로 반환됨,
// 첫 번째 인자는 상태값 저장 변수, 두 번째 인자는 상태를 바꿔주는 함수
const [message , setMessage] = useState('기본상태')
const onClickEnter = () => setMessage('하이요') // onClick에 걸어줄 함수
const onClickLeave = () => setMessage('바이요') // onClick에 걸어줄 함수
// 첫 번째 인자는 상태값 저장 변수, 두 번째 인자는 상태를 바꿔주는 함수
const [color , setColor] = useState('black')
// 첫 번째 인자는 상태값 저장 변수, 두 번째 인자는 상태를 바꿔주는 함수
const [backgroundColor, setBackgroundColor] = useState('white')
// style 안에있는 color, backgroundColor 변수가, 위에 useState로 만든 상태값 저장 변수 !!
return(
<>
<h1 style = {{color, backgroundColor}}>{message}</h1>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<button onClick={()=>{
val = val + 1;
console.log(`지역변수 업데이트 : ${val}`);
}}>지역변수</button>
<div>
<button onClick= {() =>setColor('red') }>빨간색</button>
<button onClick= {() =>setColor('purple') }>보라색</button>
<button onClick= {() =>setColor('green') }>초록색</button>
</div>
<div>
<button onClick= {() =>setBackgroundColor('white') }>기본배경</button>
<button onClick= {() =>setBackgroundColor('black') }>반전배경</button>
</div>
</>
);
}
ReactDOM.render( <Say/> , document.getElementById('root'));
</script>
</body>
</html>html 파일로 만들어서 쌩으로 실행이 가능한 코드입니다.
▲실행 결과 사진
input 창의 value 를 useState로 저장하는 방법
UseStateTest.js ( App.js 는 생략 )
import React, { useState } from "react";
const UseStateTest = () => {
const [name, setName] = useState('');
const onChange = (e) => {
setName(e.target.value);
};
return (
<>
<input onChange={onChange} />
<h1>제 이름은 {name}입니다.</h1>
</>
);
};
export default UseStateTest;onChange 함수에서 매개변수로 사용된 e 는 event 의 약자이며 , 로그를 찍어보면
e 가 좀 괴상하게 생기긴 했는데, e에 있는 target 속성을 열어보면 input이 있는걸 확인할 수 있다.
onChange 가 될 때 마다, setName 함수가 호출될 것이고 그 말은 곧 ,
input 에 입력하는값이 즉시 name 상태 저장 변수로 저장된다.
2. useEffeft
useEffect란 컴포넌트가 조건에따라 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook 이다.
useEffect(()=> {
// 실행하고자 하는 함수
() => {
}
}, []);
1. 컴포넌트가 렌더링 될 때 마다 (의존성 배열 생략) ,
2. 최초 렌더링 시 한 번만 (의존성 배열에 공백), (최초 렌더링 = 마운트 되다)
3. 특정 변수의 상태가 변할 때만 (의존성 배열에 상태 변수 명시),
용어 설명 !!! -> deps : dependency (의존성)
useEffect 내에서 사용하는 State나 Props가 존재한다면, useEffect의 deps에 넣어주는 것이 규칙이다. 만약 넣어주지 않는 다면 useEffect 내의 함수가 실행될 때 최신 State, Props를 가리키지 않는다는 문제점이 생긴다!
4. 컴포넌트가 사라질 때, 특정 값이 바뀌기 직전에 (useEffect 안에 return 함수 (clean-up) )
Timer 컴포넌트
토글 버튼을 눌러서 1초마다 한번 씩 현재시간을 log에 출력하거나, 출력을 그만두는 기능.
특정값이 업데이트 되기 직전에 cleanup 함수를 사용하고 싶다면 deps(의존성배열) 안에 감지하고 싶은 값을 넣어주면 된다. (사진은 없다)
Timer 컴포넌트를 하위컴포넌트로 렌더링 시키는 중인 App.js
컴포넌트가 사라질 때, 수행되는 함수(clean-up) 라서 뒷정리 함수라는 이름으로도 불린다.
3. useReducer
useReducer 란 다양한 컴포넌트의 state를 일괄적으로 업데이트 할 때 사용하는 Hook 이다.
1. 상태의 변화는 dispatch 의 호출에 의해서만 일어난다.
2. dispatch 의 매개변수는
업데이트를 하기 위해 필요한 정보 객체 { type : 'INCREMENT' } , { type: 'DECREMENT' }
= reducer 함수의 두 번째 인자로 들어가게 됨
이다.
3. reducer 함수에서만 실질적인 값의 변화가 일어난다. (새로운 상태값이 반환 된다.)
value의 증가 감소의 상태 관리를 reducer 함수에서 모두 관리하고 있다.
하나의 함수에서 상태관리를 하는것이 reducer의 장점.
4. useContext
Context 란?
React 공식 문서에 쓰여있는 설명에는, ' context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다 ' 라고 적혀있다.
일반적인 React 어플리케이션에서 데이터는 props를 통해서 부모에서 자식에게 전달 되어야 한다.
Parent.js
Child.js
Parent 의 return 부분에서 컴포넌트 렌더링부분에 number={number} 라는 속성(props) 을 추가하여 컴포넌트간에 변수를 공유 할 수있다.
자식에서 부모로 전달되는 경우도 있긴 하지만, 구조가 기구하다.
부모에서 만든 함수를 자식에게 부여해서,
자식에서 그 함수를 이용하여 상태를 변화시키고
부모가 변화를 감지하여 렌더링 하는 방식이다 .
Parent.js
Child.js
부모에서 만든 함수( getData(number) ) 를 자식에게 부여해서, ( <Child getData={getData} ></Child> }
자식에서 그 함수를 이용하여 상태를 변화시키고 ( onClick 에서 getData 함수 사용중 -> 상태 변화 됨 )
부모가 변화를 감지하여 렌더링 하는 방식이다 .
컴포넌트가 많아지면 많아질수록 , 이렇게 일일이 props 를 전달하기에는 현실적으로 무리...
에휴
그래서 사용하는것이 useContext.
어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우
useContext를 이용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해준다.
<script type="text/babel">
/* context는 React컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법이다.
* 트리 구조가 복잡해질 수록 하위 컴포넌트로 props를 전달하기 위해 drilling 이 발생할 수 있게 되고,
* 그러면 유지보수가 매우 힘들어지고 코드를 읽기도 힘들어지게 된다.
* 하지만 context를 사용하면 중간 엘리먼트들에게 props를 넘겨주지 않아도 되고, 유지보수도 훨씬 수월해지게 된다.
*
* 단, context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문에 꼭 필요할 때만 써야 한다.
* 따라서 때에 따라서는 context보다 컴포넌트 합성이 더 간단한 해결책일 수 있다.
*/
const {useState, createContext, useContext} = React;
// 주의 : 첫글자 대문자로 해야함
const DarkModeContext = createContext(null);
const UserContext = createContext(null);
function Header() {
// 사용이 필요한 곳에서 꺼내서 쓴다 >?
const context = useContext(DarkModeContext);
const {isDark} = context;
return (
<header className="header"
style = {{
backgroundColor: isDark ? 'black' : 'lightgray' ,
color : isDark? 'white' : 'black'
}}>
<h1>어서오세요 헤더입니다</h1>
</header>
)
}
function Content() {
// 사용이 필요한 곳에서 꺼내서 쓴다 >?
const context = useContext(DarkModeContext);
const userContext = useContext(UserContext);
const {isDark} = context;
const {username, setUsername} = userContext;
setUsername('이대엽'); // 바로 실행이 되긴되네요
return (
<div className="content"
style = {{
backgroundColor: isDark ? 'black' : 'white' ,
color : isDark? 'white' : 'black'
}}>
<p>콘텐츠 입니다<br/></p>
<p>{username}님 안녕하세요 ?</p>
</div>
)
}
function Footer() {
// 사용이 필요한 곳에서 꺼내서 쓴다 >?
const context = useContext(DarkModeContext);
const {isDark, setIsDark} = context;
const toggleHandler = () => {
setIsDark(!isDark);
}
return (
<footer className="footer"
style = {{
backgroundColor: isDark ? 'black' : 'lightgray' ,
color : isDark? 'white' : 'black'
}}>
<button onClick={toggleHandler}>{isDark? '다크모드 해제' : '다크모드 전환!!' }</button>
우리집은 대한민국 부산시
</footer>
)
}
function Page({isDark, setIsDark}) {
return (
<div className="page">
<Header />
<Content />
<Footer />
</div>
)
}
// <Header isDark={isDark}/>
// <Content isDark={isDark}/>
// <Footer isDark={isDark} setIsDark={setIsDark}/>
function App() {
// App 에서 만든 setState 를 다른 컴포넌트한테 계속 넘겨주면서 사용할 수 있구나
const [isDark, setIsDark] = useState(false)
const [username, setUsername] = useState('유재석')
/* Provider는 context를 구독하고 있는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
* Provider(제공자)는 value props을 이용하여 하위 컴포넌트에게 값을 전달한다.
* 이 때 값을 전달받을 수 있는 컴포넌트 수에는 제한이 없다.
*
* Provider 하위에서 context를 구독하는 모든 컴포넌트는 value prop이 바뀔 때 마다 다시 랜더링된다.
* 즉 isDark 가 바뀌면 전체리랜더링
* */
return (
// <Page isDark = {isDark} setIsDark = {setIsDark}/>
// 하위 컴포넌트 들에서도 사용이 가능하다
<UserContext.Provider value = {{username, setUsername}}>
<DarkModeContext.Provider value = {{isDark, setIsDark}}>
<Page/>
</DarkModeContext.Provider>
</UserContext.Provider>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));
</script>최상단에서 createContext 를 하고, 컴포넌트의 부모위치에서 Context.Provider 로 공유받을 수 있게 설정 하고.
각각의 컴포넌트에서도 따로 선언하여 사용하는 방식이다.
설명이 짧아서 미안하다
나 많은일이 있었다 힘들다 진짜
'더존 노션 필기 옮기기 > React' 카테고리의 다른 글
| React 비상사태 (0) | 2022.09.08 |
|---|---|
| React 1일차 컴포넌트 ,JSX , props (0) | 2022.09.08 |
