useState 사용이유
리액트는 mvc 패턴처럼 직접 연결 후 값을 수정하는게 아니라,
react의 메소드인 useState()를 사용해서 값을 수정하도록 해줘야 함(상태 갱신)
handleChangeInput(event) {
// this.state.searchKeyword = event.target.value;
// this.forceUpdate()
this.setState({
searchKeyword: event.target.value,
})
}
<설명>
리액트에서 input을 제대로 다루려면 브라우져 상태 관리를 리액트 안으로 가져와야 하는데 이 때 사용할 수 있는 것이 리액트 컴포넌트.
클래스로 제공하는 리액트 컴포넌트는 상태 관리를 위한 내부 변수 state를 가짐. 이 값을 input의 value로 지정 시, state가 변경될 때마다 input 엘리먼트가 반응함.
상태를 변경하는 방법은 Component 클래스의 setState() 메서드가 수행함. 메서드를 통해 상태를 관리해야 컴포넌트는 상태의 변화를 인지하게되고 무사히 UI도 변경 가능.
리액트 검색폼 구현
리액트의 컴포넌트 객체를 상속받아서 사용.
App 객체에 render를 선언한 뒤에
가상 리액트 돔에서 render 된 후에, 화면상에도 출력.
class App extends React.Component {
constructor() {
super();
this.state = {
searchKeyword: "",
};
}
handleChangeInput(event) {
// this.state.searchKeyword = event.target.value;
// this.forceUpdate()
this.setState({
searchKeyword: event.target.value,
})
}
render() {
return (
<>
<header>
<h2 className="container">검색</h2>
</header>
<div className="container">
<form>
<input
type="text"
placeholder="검색어를 입력하세요"
autoFocus
value={this.state.searchKeyword}
onChange={event => this.handleChangeInput(event)}
/>
<button type="reset" className="btn-reset"></button>
</form>
</div>
</>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
리액트 조건부 렌더링
1. 엘리먼트 변수 사용
2. 삼항 연산자 사용
3. && 연산자 사용
1. 엘리먼트 변수 사용
아.. onChange로 handleChangeInput 함수로 계속 searchKeywor값을 바꿔주면서 해주는데 resetButton라는 엘리먼트가 조건문을 계속 만족하게 함.
class App extends React.Component {
constructor() {
super();
this.state = {
searchKeyword: "",
};
}
handleChangeInput(event) {
const searchKeyword = event.target.value;
this.setState({ searchKeyword });
}
render() {
let resetButton = null;
if(this.state.searchKeyword.length > 0) {
resetButton = <button type="reset" className="btn-reset"></button>
}
return (
<>
<header>
<h2 className="container">검색</h2>
</header>
<div className="container">
<form>
<input
type="text"
placeholder="검색어를 입력하세요"
autoFocus
value={this.state.searchKeyword}
onChange={(event) => this.handleChangeInput(event)}
/>
{resetButton}
</form>
</div>
</>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
2. 삼항 연산자 사용
class App extends React.Component {
constructor() {
super();
this.state = {
searchKeyword: "",
};
}
handleChangeInput(event) {
const searchKeyword = event.target.value;
this.setState({ searchKeyword });
}
render() {
// let resetButton = null;
// if(this.state.searchKeyword.length > 0) {
// resetButton = <button type="reset" className="btn-reset"></button>
// }
return (
<>
<header>
<h2 className="container">검색</h2>
</header>
<div className="container">
<form>
<input
type="text"
placeholder="검색어를 입력하세요"
autoFocus
value={this.state.searchKeyword}
onChange={(event) => this.handleChangeInput(event)}
/>
{this.state.searchKeyword.length > 0 ? ( // 조건부 사용!!!!!!!!!!!!!!!!!!!!!!!!!!
<button type="reset" className="btn-reset"></button>
) : null}
</form>
</div>
</>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
3 && 연산자 사용(js에서는 앞의 조건이 거짓이면 뒷 내용은 실행안함)
jsx에서는 false값도 무시하기 때문에 아무것도 출력하지 않음.
{this.state.searchKeyword.length > 0 && (
<button type="reset" className="btn-reset"></button>
) }
'🪁react > react 실습' 카테고리의 다른 글
| 키워드 제거 시, 검색폼 내용도 같이 지우기[제출 키워드를 false로] (0) | 2024.01.03 |
|---|---|
| 검색폼 삭제기능 구현[버튼을 누르거나, 검색어를 지우면 reset 실행] (0) | 2024.01.02 |
| react의 특성1[리액티브 : 특정 값에 의존해 자동으로 반응하는 것] (0) | 2023.12.30 |
| js 검색기능(3) (0) | 2023.12.27 |
| js 검색폼 만들기(2)[form 새로고침 막기, submit으로 다른객체에 값 전달] (0) | 2023.12.26 |