스파르타코딩클럽 내일배움캠프 TIL30

이번주 배웠던 것 복습

• JSX에서 주의할 점
  • 하나의 태그만 리턴해주기 때문에 <div>, <> 등의 태그로 감싸준다.
  • class 가 아닌 className 을 사용해야 한다.
  • 자바스크립트 문법을 이용할 때는 {} 를 사용해야 한다.
• 파일명 지정
  • .js 는 순수 자바스크립트만 썼을 때
  • .jsx 는 컴포넌트 파일일 때
• Css Box Shadow Generator
  • https://cssgenerator.org/box-shadow-css-generator.html
• Props
  • component 에 속성으로 원하는 key = value 를 입력한다.
  • key, value 들이 props 라는 객체로 전달된다.
  • 객체이기 때문에 props.name 형식으로 사용한다.
  • 외부로부터 전달받은 속성을 이용해서 UI에 적용해준다.

Redux 특강

1. 리액트는 어떻게 실행되는가 ?

• index.html 파일을 찾아간다.
• root 라는 아이디를 가지고 있는 div를 갖고 온다.
• index.js 파일에서는 root라는 아이디를 가진 요소를 정하고 가상돔을 설정한다.

2. 리덕스

• 우리는 컴포넌트마다 state 를 설정하고, 각각의 방식대로 setState 를 해 주었다.
• state 가 사용하는 곳이 너무 많아서 오류를 찾기 어렵다. 그렇기 때문에 리덕스라는 상태관리 툴이 필요하다.
  • export 된 store 를 통해 전체 영역에서 state 를 관리한다.
    • 전역 state > store 에 있는 놈들
    • 지역(컴포넌트) state
• 리덕스에서 이해해야 하는 부분
  • 기존에 수 없이 많은 곳에서 참조하고, 수정됐던 state 들을 store(저장소)로 몰아넣게 (저장)된다.
  • store 안에는 state만 들어있는게 아니라 관리할 수 있는 메서드들(reducer, dispatch) 도 들어있다.

3. 리덕스의 작동 방식

• 어떠한 요청이 컴포넌트 상에서 들어온다.
• 이벤트의 요청을 받고 action 을 dispatch 라는 명령어를 통해서 store로 보내준다.
• store 에서 action 을 받으면 원래 있던 값을 action 에 들어있는 payload 만큼 변경해준다.
• return 이 된 값이 UI로 가서 갱신되게 된다.

4. 사용방법

• 원활한 프로젝트 진행을 위해서는 redux 폴더를 만든다.
• 그 안에 config(설정) 폴더와 modules 폴더를 만든다.
  • config 는 configuration(환경설정) 의 줄임말
• config 에서 store를 만들어서 필요한 놈들에게만 내보내준다.
  • 1. 리듀서를 만든다.
  • 2. 만든 리듀서를 통해 store를 생성한다.
  • 3. 생성한 store를 export(내보낸다.)
• 모듈 안에있는 counter 를 combineReducers() 를 이용해 묶어준다.
• modules 폴더
  • Action Value
    • 리듀서가 실행되기 위해서는 UI가 먼저 이벤트 핸들러를 보내고, dispatch라는 명령어를 사용하는데 여기에서 Action을 담는다. (무엇을 할지를 적어놓는 곳)
    • type과 payload를 결정한다. (무엇을 할지 결정)
  • Action Creator
    • 액션이 안으로 들어오면 그 액션을 일으킨다.
    • type, payload를 가진놈
  • Reducer
    • 리듀서는 각 타입에 따라 어떤 역할을 실행해줄지 결정된다.
    • action.type이 들어오면 리듀서가 실행된다.
• modules 에서 만든 reducer 를 config 에서 combine 해주면 쓸 준비가 끝난 것
  💡 export default 이 파일에서 가장 중요하게 내보내야 할 것!!

5. 사용

• store 상에 있는 state를 읽어오는 부분 useSelector() 사용
• dispatch를 사용하기 위해 변수화 시킨것 useDispatch();
• input을 제어하는 함수 onChangeHandler
• onClick 에서 비로소 redux를 사용할 때! 지정해놓은 액션을 사용할 곳이다!!