TIL 210923

오늘 한 일

React 학습

EventListener 이벤트 리스너

• 클래스형

 constructor(props) {
    super(props);

    this.state = {};
    this.circle = React.createRef(null);
  }


  hoverEvent = (e) =>{     // e는 event 객체
    console.log(e.target)  // event 가 발생한 요소가 무엇인지 찾기
    console.log(this.circle.current); // e.target 과 같은 요소인지 확인

    // 색깔 바꾸기
    this.circle.current.style.background = 'yellow'
  }

  componentDidMount() {
    console.log(this.circle);
    // addEventListener를 사용하려면 이미 DOM 요소가 완성되어 있어야함 (Mount가 끝나 있어야함)
    this.circle.current.addEventListener('mouseover', this.hoverEvent) 
                            // 어떤 이벤트가 발생했을때, 어떤 행동을 할 것인가
  }
  
 componentWillUnmount() {
    // 컴포넌트가 사라지면 이벤트 리스너도 같이 사라지게 설정 (클린업)
    this.circle.current.removeEventListener('mouseover', this.hoverEvent)
  }

• 함수형

const Text = (props) => {
  const text = React.useRef(null);

  const hoverEvent = () => {
      text.current.style.background = 'yellow';
  }

  // useEffect - 리액트 훅
  React.useEffect(() => {
      text.current.addEventListener('mouseover', hoverEvent);

      // 이벤트 리스너 지우기(컴포넌트가 사라지는 위치에서 ->  componentWillUnmount())
      return () => {
          text.current.removeEventListener('mouseover', hoverEvent);
      }
  }, []);
  return <h1 ref={text}>텍스트입니다!</h1>;
};

Routing 라우팅

• SPA (싱글 페이지 어플리케이션 - html 페이지가 한 개)에서 페이지 이동하는 방법

• react-router-dom 사용 (공식문서 참고)

Redux 리덕스

• 전역 데이터 저장소

  • 완전히 별도로 생성된 저장소로, 데이터를 한군데 몰아넣고 여기저기서 꺼내 볼 수 있게 해줌

• 전역상태관리 흐름에서 중요한 것
  => 리덕스의 상태관리 흐름

  • 전역으로 누구나 데이터를 볼 수 있음
    => 구독

  • 데이터를 참조/수정 할 수 있음 ( 데이터 직접 수정 x, 데이터를 바꿀 수 있는 함수를 호출)
    => action을 dispatch (reducer가 스토어의 데이터를 바꿈)

  • 바뀐 값을 누구나 볼 수 있어야함
    => 스토어의 데이터가 바뀌었음을 알려줌(컴포넌트는 새로운 데이터를 가지고옴 + 리랜더링)

• 리덕스 용어

  • State - 리덕스가 가지고 있는 데이터
  • Action - 수정
  • ActionCreator - 액션을 만들기 위해 만들어진 함수
  • Reducer - 데이터를 실제로 바꾸는 곳 (Action을 dispatch하면 자동으로 실행됨)
  • Store - reducer가 모여있는 곳 (데이터, reducer, 내장함수를 포함)
  • dispatch - 스토어의 내장함수 (바꿔달라고 요청함)

느낀 점

멘붕.

내일 할 일

• 리액트 학습
• 리액트 복습 (할 수 있을까...?)