:)5W
오늘도
배워봅니다.
시작
1. Context api
- 일반적으로 부모와 자식간 props를 날려 state를 변화시키는 것과는 달리
context api는 컴포넌트 간 간격이 없다 컴포넌트를 건너띄고 다른 컴포넌트에서 state, function가능 (전역 상태 관리)- 리액트에서 제공하는 built-in API로 State 관리를 외부 라이브러리 없이 가능
- Context API를 위해 Hooks도 제공
- 컴포넌트안에서 전역적으로 데이터를 공유하도록 나온개념
- 대표적으로 로그인, 사용자 설정파일, 테마, 언어 등등 컴포넌트간 공유되어야할 데이터
a. React.createContext()const Login = React.creatContext(null)
- 파라미터안에 Context기본값 설정가능
b. Context.ProviderHello.Provider value = {this.hi}
- Context 안에 Provider라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context의 값을 정할 수 있습니다.
- 변수는 꼭 value를 사용해야한다
- provider 하위에 context를 가진 component는 provider의 value로 가진 state가 rerender됩니다.
c. Contexxt.Consumer<Hello.Consumer> {value => contest}- context변화를 구독하는 컴포넌트
- context 자식은 함수이어야한다
- 가장 가까운 context는 probider
2. Redux
- 상태(state)관리 라이브러리, Node.js 모듈
a. Single source or truth- 동일한 데이터는 항상 같은곳에서 가지고 온다
- 스토어라는 하나뿐인 데이터 공간 존재
b. State read-only- 읽기 전용, setState로 변경가능
변경은 순수함수로만 가능- store - action - reducer
3. Mobx
- 전역상태 관리 라이브러리
- React 종속 라이브러리가 아님
- redux와 다르게 store에 제한이 없음
- 선언이 간략화
- TypeScript기반
- observable이 기본
a. State- 관찰 받고 있는 상태
b. Derivation- 파생값
c. Reactions- 반응, 부가적인 변화
d. Action- 변경사항
e. 특징- 객체 지향적
- 단일스토어 강제 x
- 데코레이터
4. SWR
- 데이터를 가져오기위한 ReactHooks (stale-while-revalidate)
- 백그라운드에서 캐시를 재검증하는 동안에 기존의 캐시데이터를 사용하여 화면을 그린다.
- 도중에 에러가 반환되도 캐시된 데이터를 활용하게하여 불필요한 데이터 호출과 렌더링에 시간을 쓰지않고 효율적으로 동작한다.( 재검증하는 동안 해당 stale response를 즉시 리턴하여 네트워크 지연 시간을 숨기는 전략 )
- 서버데이터를 앱데이터처럼 사용
- 데이터 갱신을 위한 re-fetching을 간단히 구현할 수 있다.
- fetch data가 캐시 후 앱 전역으로 공유되기 때문에 불필요한 request를 줄일 수 있다.
5. 정규식표현
- E-mail. 문자 w
/^\w@\w\.\w$/ 하나 /^\w+@\w+\.\w+$/ 하나이상 /^\w?@\w?\.\w?$/ 하나있을수있고없고
- 문자만
/^[a-zA-Z]$/
- 핸드폰번호 숫자 d
/010-1234-5678/ /^\d{3}-\d{3, 4}-\d{4}$/https://regexr.com << 여기서 정규표현식 테스트해볼 수 있음
Hi!