당니의 개발자 스토리
1/2 본문
1교시
클래스형과 함수형 컴포넌트를 지난 시간에 봤었고 외부에서 컴포넌트 쪽으로 값을 넘겨 주는 거 props 변수에 대해서 봤고요
컴포넌트 내부에서 사용하고 있는 값, status 변수를 봤습니다.
props 변수는 컴포넌트 외부에서 부모 컴포넌트가 자식 컴퍼넌트에게 넘겨 주는 값이다. props 변수를 통해서 컴포넌트가 아주 유연하게 재사용 될 수 있도록 해준다는 거예요.
어떤 값을 넘겨주냐 따라서 동일한 형태 와 동작을 제공 하는데 안에 내용은 바껴가지고 동작을 하는 거죠
Class형 컴포넌트의 경우에는 this.props라는 변수를 가지고 props 변수를 끄집어낼 수 있고
함수에서는 매개변수를 이용해서 매개 변수로 전달 된 인자 값을 이용해서 가지고 올 수 있다.
둘 다 개체 형태로 전달이 됩니다.
State 변수는 컴포넌트 내부에서 관리 하는 값이에요. 그래서 일반적인 변수와의 차이점은 얘는 변경이 되면 업데이트가 됩니다. 화면이 다시 그려 지게 된다. 그래서 2가지 변수가 리액트에서는 핵심이 됩니다.
이벤트 핸들링 예제
src 디렉터리에 EventPractice.js 파일을 생성
import { Component } from "react";
class EventPractice extends Component {
render() {
return (
<div>
<h1>이벤트 연습</h1>
</div>
);
}
}
export default EventPractice;App.js 파일에 EventPractice 컴포넌트를 추가
import EventPractice from "./EventPractice";
function App() {
return (
<EventPractice />
);
}
export default App;EventPractice 컴포넌트에 입력창을 추가하고, 입력값을 콘솔에 출력하도록 수정
import { Component } from "react";
class EventPractice extends Component {
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="입력해 보세요."
onChange={e => console.log(e.target.value)} />
</div>
);
}
}
export default EventPractice;onChange={e => console.log(e.target.value)} 은 입력창에서 많이 쓰인다.
onChange={e => console.log(e)} 으로 고치고 돌려보면,
이렇게 이벤트의 종류에 따라서 이벤트 개체의 내용은 조금씩 달라요.
이렇게 e.target.value에 입력창에 입력한 값이 들어있는 걸 확인하실 수 있습니다.
state 변수를 추가하고, 입력 내용을 해당 변수에 설정
import { Component } from "react";
class EventPractice extends Component {
state = {
message: "" // 빈 문자열
};
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="입력해 보세요."
onChange={e => {
console.log(e.target.value);
this.setState({ message: e.target.value }); // 상태변수로 바꿔줌
}} />
<h2>입력창 내용: {this.state.message}</h2>
<!-- 그 상태변수의 값을 출력함 -->
</div>
);
}
}
export default EventPractice;
버튼을 추가하고, 해당 버튼을 클릭하면 입력값과 입력 내용을 제거하도록 수정
import { Component } from "react";
class EventPractice extends Component {
state = {
message: ""
};
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="입력해 보세요."
value={this.state.message} ⇐ 해당 라인이 없으면 삭제 버튼을 클릭해도
onChange={e => { 입력창 내용은 삭제되지 않음
console.log(e.target.value);
this.setState({ message: e.target.value });
}} />
<h2>입력창 내용: {this.state.message}</h2>
<button onClick={() => this.setState({ message: "" })}>삭제</button>
</div>
);
}
}
export default EventPractice;
형광펜 부분이 이벤트 핸들러 함수이다.
value={this.state.message}가 없으면 입력창은 "자유롭게" 값을 가질 수 있게 되며, 상태의 변화가 입력창에 반영되지 않아서 삭제 버튼을 눌러도 내용이 삭제되지 않습니다. 상태와 입력창을 연결하려면 value를 사용해야 상태가 바뀔 때 입력창도 업데이트됩니다.
상태는 컴포넌트 내에서 변경될 수 있는 데이터를 말합니다. 예를 들어, 입력창에 사용자가 입력하는 텍스트가 바로 상태(state)가 될 수 있습니다.
이벤트 핸들러 함수를 미리 정의해서 전달하는 방식으로 변경
import { Component } from "react";
class EventPractice extends Component {
state = {
message: ""
};
handlerChange = e => {
console.log(e.target.value);
this.setState({ message: e.target.value });
};
handlerClick = () => {
this.setState({ message: "" });
};
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="입력해 보세요."
value={this.state.message}
onChange={this.handlerChange} />
<h2>입력창 내용: {this.state.message}</h2>
<button onClick={this.handlerClick}>삭제</button>
</div>
);
}
}
export default EventPractice;
import { Component } from "react";
class EventPractice extends Component {
/* 화살표 함수를 안 쓸 경우
constructor(props) {
super(props);
this.state = {
message: ""
};
this.handlerChange = this.handlerChange.bind(this);
this.handlerClick = this.handlerClick.bind(this);
}
handlerChange(e) {
console.log(e.target.value);
this.setState({ message: e.target.value });
};
handlerClick() {
this.setState({ message: "" });
};
*/
state = {
message: ""
};
handlerChange = e => {
console.log(e.target.value);
this.setState({ message: e.target.value });
};
handlerClick = () => {
this.setState({ message: "" });
};
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="입력해 보세요."
value={this.state.message}
onChange={this.handlerChange} />
<h2>입력창 내용: {this.state.message}</h2>
<button onClick={this.handlerClick}>삭제</button>
</div>
);
}
}
export default EventPractice;