Event Lister란?
사용자가 어떤 행동(=이벤트)를 하는지 안하는지 파악해서 정보를 넘겨주는 역할을 한다.
Ex) 마우스 클릭, 터치, 마우스오버, 키보드 누름 등이 자주 쓰인다.
class component의 constructor 부분에 Event Listener를 먹이기위한 React.createRef() 함수를 만들어준다.
만들어 준 이후에, 어떠한 이벤트를 실행시켜줄건지 함수를 만들어서 저장.
해당 함수를 componentDidMount() 함수 그리고 componentWillUnmount() 함수에 넣어서 작동을 시킨다.
그리고 선언한 이벤트를 어떤 태그에 넣어줄지 결정하여 return 값 안에 반환.
class App extends React.Component{
constructor(props){
super(props);
this.state = {
count : 3,
};
this.div = React.createRef();
}
hoverEvent = (e) => {
console.log(e);
console.log(e.target);
e.target.style.background = '#eee';
}
componentDidMount(){
this.div.current.addEventListener("mouseover", this.hoverEvent);
}
componentWillUnmount(){
this.div.current.removeEventListener("mouseover", this.hoverEvent);
}
render(){
return (
<div className = "App" ref = {this.div}>
<div style ={{
width : '150px',
height : '150px',
backgroundColor: '#eee',
margin: '10px'
}}>nemo</div>
</div>
);
}
}라우팅이란? 페이지를 이동해서 다니는 것 ex) 카페 페이지 -> 블로그 페이지
SPA는 어떤 형태로 라우팅을 하는가?
Html 파일은 하나만 있지만 주소에따라서 움직인다. 그래서 if문을 처리하여 원하는 컴포넌트들만 주소에따라서 보여줄 수 있다. -> 다소 비효율적 -> 그렇기 떄문에 이미 만들어져있는 패키지를 사용한다.
리덕스 개념과 용어
리덕스는 데이터를 한군데에 몰아넣고 여기저기서 꺼내볼 수 있게 한 구조이다.
State: 리덕스에서 저장하고 있는 상태값("데이터"라고 생각해도 된다.)
Action: 상태에 변화가 필요할 때 (=가지고 있는 데이터를 변경할 때) 발생하는 것이다.
Reducer: 리덕스에 저장된 상태(=데이터)를 변경하는 함수이다.
Store: 우리가 데이터를 볼 수 있게 하는 것
Dispatch: 액션을 발생시키는 역할을 맡는다.
리덕스의 특징
- 스토어는 무조건 한군데만 본다. (단일 스토어 규칙) 한 프로젝트당 하나의 스토어
- 리듀서는 무조건 순수한 함수여야한다.
순수한 함수의 의미 - 파라미터 외의 값에는 의존하지 않는다.
- Store의 State는 오직 action으로만 변경하여야 한다.
