• predictable state container : 상태 관리 라이브러리

Props vs State

• Props

  • propertie의 줄임말

  • 컴포넌트 간의 상호작용이 있는 경우 Props를 사용한다.

  • Props의 작동방식은 위에서 아래로(부모컴포넌트에서 자식컴포넌트)로 진행된다.

  • Props 전달시 data 값은 변경 되지 않는다

    예시) 부모컴포넌트에서 자식컴포넌트로 전달할때 Props의 값은 변경되지 않는다

    값을 변경하고자 한다면 부모컴포넌트에서 자식컴포넌트에게 다시 값을 주어야한다.

  • Props 예시코드)

    <ChatMessages
    	messages = {messages}
    	currentMember = {member}
    />
    

• State

  • 컴포넌트 안에서 data를 사용할 때 사용한다.(컴포넌트 간의 상호작용 X : 안에서 변경)

  • 컴포넌트 안에서 data 값이 변경 할 수 있다.

  • state값이 변하면 re-render 된다.(재랜더링)

  • State 예시코드)

    state = {
    	message : '',
    	attachFile : undefined,
    	openMenu : false,
    };
    

• Redux는 State를 관리해주는 툴

  • Redux가 없다면 컴포넌트끼리 상호작용시 여러 곳을 거쳐서 이동해야 할 경우가 발생할 수 있음

  • Redux는 STORE에 저장하여 컴포넌트에게 전달할 수 있음

    

• Redux Data Flow

  • strict unidirectional data flow : 엄격한 단방향의 데이터 흐름

    

• Action : 무엇이 일어났는지 설명하는 객체

  • 예시)

    • type : 'LIKE_ARTICLE' , articleId :42 → 기사에 좋아요를 눌렀다 , 기사는 42번

    • type : 'FETCH_USER_SUCCES' , response : { id : 3, name: 'Mary'}

      → 유저가져오기를 성공했다. id는 3이고 이름은 Mary이다.

    • type : 'ADD_TODO', text:'Read the Redux docs.'

      → TODO를 추가했다. Read the Redux docs 항목

  

• Reducer : state 값이 변경되었을 때 변경되었다는 것을 설명해주는 곳

  

  • Reducer는 pure function이기에 reducer 내부에서 하지 말아야 할 것들
    • 인자값 변경
    • API 호출 및 라우팅 전환
    • 비순수 함수 호출 : Date.now() / Math.random() 같은거...

• Store : 어플리케이션의 state을 감싸는 역할

  • 다양한 메소드가 있어서 관리 할 수 있다.