react 공부

< 리엑트 라이프사이클 >

리엑트 라이프 사이클

호출 순서

1. 마운트시

1-1. constructor()
1-2. render()
1-3. componentDidMount()

2. 업데이트시

2-1. shouldComponentUpdate()
2-2. render()
2-3. componentDidupdate()

3. 마운트 해제시

3-1. componentWillUnmount()

4. 에러 발생에 사용되는 사용주기 메서드

4-1. static getDerivedStateFromError()
4-2. componentDidCatch()

리엑트 공식문서-라이프사이클

---

< 리엑트 Hook >

사용규칙

1. 최상위에서만 Hook 호출해야함. 반복문, 조건문, 중첩문 함수 내에서 호출x

2. 함수 컴포넌트의 경우에만 호출, class 컴포넌트에서 호출x

1. useState

[사용법]
const [state,setState] = useState(false);
setState(true);

const [todos,setTodos] = useState([{text:'learn hooks'}])

2. useEffect

[사용법]
useEffect(()=>{
	...
},[])
// []이와 같이 해주지 않으면 무한 렌더링 된다.
// 배열안에 인자값으로 넣어주는 값이 변할 때마다 새롭게 렌더링됨.

3. useContext

: props로 값을 일일이 넘겨주지 않아도 가장 최상위 컴포넌트로 하위 컴포넌트를 감싸서 데이터 제공 가능

[사용법]
const themes = {
    light :{
    	foreground:"#000000",
        background:"#eeeeee"
    },
    dark :{
    	foreground: "#ffffff",
        background: "#222222"
    }
}

const ThemeContext = React.createContext(themes.light)

function App(){
    return(
      <ThemeContext.Provider value={themes.dart}>
        <Toolbar/>
      </ThemeContext>
    )
}

function Toolbar(props){
     return(
    	<div>
      	    <ThemeButton/>
        </div>
     )
}

function ThemeButton(){
    const theme = useContext(ThemeContext);
    return(
    	<button style={{background:theme.background,color:theme.foreground}}>
      	button
      	</button>
    )
}

4. 기타 Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

리엑트 공식문서-hooks

---

< 기타 >

react-router-dom
: 데이터가 변경되는 부분의 컴포넌트만 변경하는 spa(single-page-application)인 
리엑트의 특성상 특정 요청에 따라 적절한 컴포넌트를 라우팅하는 것을 돕는 역할.

✔ BrowserRouter?

: history API를 사용해 URL과 UI를 동기화하는 라우터.

✔ React.fragment?

: 하나의 컴포넌트에서 여러개의 엘리먼트를 return할 때 하나의 태그로 묶어서 내보내는 것을 대체하는 역할.

ex) React.fragment 사용 x
return(
	<div>
    		<p>이와 같이 여러개의 엘리먼트가 존재할때</p>
        	<span>div 등의 태그로 하나로 묶어서 return해야함</span>
	</div>
)

ex) React.fragment 사용 o
return(
	<React.fragment>
    		<p>div 등의 태그로 하나로 묶어서 return하던 것을</p>
        	<span>React.framgment로 대체</span>
	</React.fragment>
)

react-router

• react-router-dom : 웹 관련 컴포넌트
• react-router-native : 앱 관련 컴포넌트.

react-async?

---