13일 차: React 실습 준비

돌이켜보면 이 부분이 이 블로그 포스트의 SEO에 피해를 줄 수 있었습니다. 그러니 Google 크롤러 여러분, 저를 선택해주세요.

구성 요소가 작업을 전달하도록 허용

이전 게시물에서 React 구성 요소에 Redux Store의 상태에 대한 액세스 권한을 부여했습니다. 이제 편집할 수 있는 기능을 제공합니다.

const mapDispatchToProps = dispatch => ({
  stateOne: actionData => {
    dispatch(actionCreator(actionData));
  }
});

여기서 dispatch 기능은 필수입니다. 또한 actionData는 선택 사항입니다. 작업에 필요하지 않은 경우 생략할 수 있습니다.

Redux-React 격차 해소

액션과 상태를 컴포넌트 소품에 매핑하는 함수를 선언했습니다. 이제 구성 요소를 선택할 시간입니다.

let wrappedComponent = ReactRedux.connect(mapStatesToProps, mapDispatchToProps)(theComponent);

(ES6 스타일의 함수 즉시 호출에 주목하세요?)

기본적으로 Redux 스토어와의 상호 작용에 필요한 부분과 함께 이전 구성 요소를 포함하는 새 구성 요소를 만들었습니다.

또한 두 매개변수는 완전히 선택적입니다. 상태 값이 필요하지 않거나 상태를 업데이트할 필요가 없는 구성 요소 또는 사이코패스인 경우 둘 다 가질 수 있습니다.

작업을 전달하는 상태 및 함수는 이제 this.props 에서 액세스할 수 있습니다.

준비 환경, 일명 육즙이 많은 부분 😋

그래서 실제로 npm를 사용하는 것은 이번이 처음입니다. 몇 번의 구글 검색 끝에 그것이 무엇인지 알 수 있었습니다.

내가 수집할 수 있는 것에서 npm는 JavaScript용 패키지 관리자입니다(pacman , apt 등). 패키지는 어디에 사용합니까? Node.js 내부! (Node.js는 Python exec for... Python과 매우 유사한 JavaScript용 인터프리터입니다.)

Node.js에는 많은 일이 있지만 먼저 설치해야 합니다.

GNU/Linux 사용자 🤵🏼(특히 EndeavourOS)로서 pacman만 사용하면 됩니다.

sudo pacman -S nodejs-lts-gallium npm

(Node.js Gallium은 Node.js의 현재 활성화된 LTS 버전입니다.)
비밀번호를 입력하고 잠시 후 설치됩니다!

FreeCodeCamp 권장 사항에 따라 create-react-app 패키지를 사용하겠습니다. 그러나 전 세계적으로 설치하고 싶지 않습니다. 손이 더럽혀지기 시작하면 내일을 기다릴 것입니다.

후기

예, 우리는 이론을 마쳤습니다 🎉! 지금 버그에 직면해야 하지만 LOL. FreeCodeCamp에는 인증을 받기 전에 완료해야 하는 5개의 단일 페이지 앱이 있습니다.

다 끝내고 어떻게 해야할지 아직 고민중인데 일단 부숴야할 버그가 있을거에요 🪲👊. 내일 만나요!

Fullo me on Github !
또한 !