보통은 바뀌는 데이터를 state로 설정하는 것 같다.
> state는 화면과 연결된 데이터 라고 생각하면 편하다.
> state가 바뀌면 화면이 리렌더되면서 화면도 바뀌게 된다.
value도 변하는 값이기 때문에 state로 관리해준다.
value가 state이기 때문에 사용자가 키보드로 값을 입력하면? -> value가 바뀐다 -> 화면이 value와 같이 바뀐다.
라는 로직으로 동작해야하기 때문에 onChange이벤트가 발생할 떄마다 state(value)를 바꿔줘야 화면에 반영이 된다는 것을 주의해야한다.
class는 this문제가 있었다. constructor를 무조건 사용해야한다던가 bind를 해야했었다. (화살표 함수를 써도 되긴했음)
아무튼 그래서 function으로 되돌아 갔다고한다.
그리고 복잡하고 코드가 길어짐!
<script type="text/babel">
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false};
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
//return e('button', {onClick: () => this.setState({liked: true})}, 'Like');
return (
<button onClick={()=>this.setState({liked:true})}>
Like
</button>
);
}
}
</script>
<script type="text/babel">
//ReactDOM.render(<LikeButton/>, document.querySelector('#root')) //17버전 코드 (18버전에서도 잘 돌아감)
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>
함수 컴포넌트를 사용하면 코드가 매우 간결해지는 효과가 있음.
<script type="text/babel">
'use strict';
function LikeButton(){ //함수 컴포넌트
const [liked, setLiked] = React.useState(false);
const onClicked = () => {
setLiked(true);
}
if(liked){
return "You liked this";
}
return (
<button onClick={onClicked}>Like</button>
)
}
</script>
<script type="text/babel">
//ReactDOM.render(<LikeButton/>, document.querySelector('#root')) //17버전 코드 (18버전에서도 잘 돌아감)
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>
라이브러리를 혼자서 재구성해보는 능력 (혹은 라이브러리 안쪽을 상상할 수 있는 능력)은 매우 중요하므로 연습하면 매우 좋다고함.
아직까지 클래스 문법을 사용하는 곳이 있을 것이기 때문에 클래스 문법을 보여주고 함수 컴포넌트를 학습하자.
React에서의 불변성은 매우 중요하다.
혹시 Array의 메서드 중에
pop,push,splice,shift,unshift / concat, slice 의 차이점을 아는가?
> 불변성이 차이점이다. pop, push ~ : 원본을 변경한다. concat, slice는 새로운 배열을 만들어낸다.
React에서는 concat, slice처럼 새로운 배열을 만들어내는 것들을 굉장히 많이 사용한다. 원본을 수정하는 것들은 기존 객체를 변경하기 때문!