클래스형 컴포넌트의 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 this.props를 사용합니다.
데이터를 전달하고 화면 내용을 변경할 때에도 this.props를 사용합니다.
부모에서 자식의 state변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<title>스터디 자료</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
time: new Date(),
};
}
componentDidMount() {
this.timerId = setInterval(() => {
this.setState({
time: new Date(),
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timerId);
}
render() {
return (
<ul>
<Item value={this.state.time.toLocaleString()} />
<Item value={this.state.time.toLocaleString()} />
<Item value={this.state.time.toLocaleString()} />
</ul>
);
}
}
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.value,
};
}
componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) {
this.setState({
value: this.props.value,
});
}
}
render() {
return <li>{this.state.value}</li>;
}
}
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
</script>
</body>
</html>
자식에서 부모의 state변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<title>스터디 자료</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
};
this.changeParent = this.changeParent.bind(this);
}
render() {
return (
<div>
<CustomInput onChange={this.changeParent} />
<h1>{this.state.value}</h1>
</div>
);
}
changeParent = function (event) {
this.setState({
value: event.target.value,
});
};
}
class CustomInput extends React.Component {
render() {
return (
<div>
<input onChange={this.props.onChange} />
</div>
);
}
}
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
</script>
</body>
</html>컴포넌트 내부 메소드는 꼭 바인드를 해주어야한다.
bind로 this값을 주지 않으려면 화살표함수를 사용해도 된다.
화살표함수로 작성할 시 this값이 존재하지 않기 때문에 상위 스코프에서 this값을 찾아 바인딩 된다.
함수형 컴포넌트의 상태값은 useState훅으로 관리되기 때문에 컴포넌트의 this로부터 자유롭습니다.
또한 함수형 컴포넌트 안에서 선언한 함수들 모두 전역 객체를 this로 가지기 때문에 이벤트 핸들러에 콜백 함수를 넘기는 상황에도 신경 쓸 필요가 없습니다.
[JS] 상황에 따른 this 바인딩
알아보고 알아봐도 놀라운 thisweb에서 전역 객체는 window이다.console창에 this를 쳐보면 window객체가 나온다.그냥 this를 console에 출력시키면 {} 처럼 빈객체가 출력된다.window가 아닌 빈 객체가 나오는
velog.io
[JavaScript] 화살표 함수와 this 바인딩
본래 JavaScript에서 함수를 선언할 땐 function 이란 키워드를 쓰죠. 하지만 ES6가 도입되면서 함수를 선언하는 새로운 문법이 등장했습니다. 바로 화살표 함수입니다.
velog.io
김맥스 블로그 | React 컴포넌트와 this
리액트 클래스 컴포넌트를 작성할때는 this를 신경써야 합니다. 여러 리액트 튜토리얼을 따라해 보면 상태값(state)나 속성값(props), 컴포넌트에 선언한 메서드를 참조하기 위해 this를 사용하고 있
maxkim-j.github.io
'1차 공부 > 공부한 자료' 카테고리의 다른 글
| 외부폰트 가져온 후 특정 스타일드 컴포넌트에 적용하기 (0) | 2022.12.14 |
|---|---|
| 221214 스터디자료 env (0) | 2022.12.14 |
| 221213 UUID 공부자료 (0) | 2022.12.13 |
| 221205 리액트의 기본 (p. 428~433) (0) | 2022.12.04 |
| 221126 7-1 스터디 정리자료 (0) | 2022.11.25 |