[0623] 자바 웹 개발 과정🌞

Let's TECH🧐·2021년 6월 23일

React

자바 웹 개발 과정

목록 보기

30/31

bind 함수

bind함수를 사용하면 this는 내가 정한 object로 고정된다.

예제

class Calc extends React.Component { 
    constructor() {
        super(); // react는 상속을 받으면 부모의 생성자가 자동 호출되지 않으므로 super() 써주기
        this.state = { // state: 예약되어있음, flux 방법론에서 가장 중요한 요소
            x: 10,
            y: 20,
            result: 0
        };
    }

    xInputChange(e) { 
        // (주체는 window객체이겠지만 use strict 모드에서 보안을 위해 this는 undefined가 된다.)
        // arrow function 사용 시 this에 lexical scope 적용됨
        // onChange 사용 시 this로 넘기는 게 없어서 아래 오류 발생
        // this.state.x = 30; // 버그 - 화면이 로드되자마자 해당 값 출력됨, 다른 값으로 바꿀 수 없음

        // 사용자의 입력을 통해 값이 바뀌는 부분은 setState에 정의해주기
        this.setState({ // this가 undefined라는 오류
                 // state에 누적형으로 담기게 하려고 setState 사용
            x: e.target.value // state에 누적형으로 담기게 되고 그것을 화면에서 쓰게 됨
        });
    }

    yInputChange() { // 클래스 작성 시에는 함수 이렇게 만들기
        console.log("y");
    }

    render() {

        const el = <div id="mvc">
                        <label>x:</label>
                        <input type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
                        <label>y:</label>
                        <input type="text" value={this.state.y} onChange={(e) => {this.setState({y:e.target.value})}} dir="rtl" />
                        <input className="btn" type="button" value="덧셈"/>
                        <br />
                        <span>x+y:</span>
                        <span>{this.state.result}</span>
                    </div>  
        // 사용자 입력값이 바뀌 경우 onChange 설정해주기
        // onChange에게 this.xInputChange 함수 위임
        // 위: jsx 구문

        return el;
    }
}

// react DOM 사용하기
ReactDOM.render(<Calc />, document.querySelector("#root"));

bind를 사용해 Calc 객체를 넘겨주기

<input type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" />

예제 1) - 덧셈

1. 객체를 얻어서 값 얻기

class Calc extends React.Component { 
    constructor() {
        super(); // react는 상속을 받으면 부모의 생성자가 자동 호출되지 않으므로 super() 써주기
        this.state = { // state: 예약되어있음, flux 방법론에서 가장 중요한 요소
            x: 10,
            y: 20,
            result: 0
        };
    }

    xInputChange(e) { 
        this.setState({ // this가 undefined라는 오류
                 // state에 누적형으로 담기게 하려고 setState 사용
            x: e.target.value // state에 누적형으로 담기게 되고 그것을 화면에서 쓰게 됨
        });
    }

    btnClick() {
        // 더하기 위해 xInput 객체, yInput 객체 얻어오기
        // 1. 객체를 얻어서 값을 얻기
        let container = document.querySelector("#mvc");
        let inputs = container.querySelectorAll("input");
        let xInput = inputs[0];
        let yInput = inputs[1];
        let result = parseInt(xInput.value) + parseInt(yInput.value);
        // 속성과 값이 같을 경우 생략 가능
        this.setState({result/*:result*/});
    }

		render() {
		        // 계산기 컴포넌트
		        // this.xInputChange의 이름을 onChange로 해준 것
		        const el = <div id="mvc">
		                        <label>x:</label>
		                        <input ref="xInput" type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
		                        <label>y:</label>
		                        <input ref="yInput" type="text" value={this.state.y} onChange={(e) => {this.setState({y: e.target.value})}} dir="rtl" />
		                        <input className="btn" type="button" value="덧셈" onClick={this.btnClick.bind(this)}/>
		                        <br />
		                        <span>x+y:</span>
		                        <span ref="resultInput">{this.state.result}</span>
		                    </div>  
		        // 사용자 입력값이 바뀌 경우 onChange 설정해주기
		        // onChange에게 this.xInputChange 함수 위임
		        // 위: jsx 구문
		
		        return el;
    }
}

// react DOM 사용하기
ReactDOM.render(<Calc />, document.querySelector("#root"));

2. 리액트 방식으로 개체를 얻어서 값 얻기

btnClick() {
 	let x = parseInt(this.refs.xInput.value);
        let y = parseInt(this.refs.yInput.value);
        let result = x+y;
        this.setState({result});       
}

render() {
        // 계산기 컴포넌트
        // this.xInputChange의 이름을 onChange로 해준 것
        const el = <div id="mvc">
                        <label>x:</label>
                        <input ref="xInput" type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
                        <label>y:</label>
                        <input ref="yInput" type="text" value={this.state.y} onChange={(e) => {this.setState({y: e.target.value})}} dir="rtl" />
                        <input className="btn" type="button" value="덧셈" onClick={this.btnClick.bind(this)}/>
                        <br />
                        <span>x+y:</span>
                        <span ref="resultInput">{this.state.result}</span>
                    </div>  
        // 사용자 입력값이 바뀔 경우 onChange 설정해주기
        // onChange에게 this.xInputChange 함수 위임

        return el;
}

3. state 이용하기

btnClick() {
    let x = parseInt(this.state.x); // 최종적으로 바뀐 state가 오게 됨
    let y = parseInt(this.state.y);
    let result = x + y;
    this.setState({result});     
}

render() {
        // 계산기 컴포넌트
        // this.xInputChange의 이름을 onChange로 해준 것
        const el = <div id="mvc">
                        <label>x:</label>
                        <input ref="xInput" type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
                        <label>y:</label>
                        <input ref="yInput" type="text" value={this.state.y} onChange={(e) => {this.setState({y: e.target.value})}} dir="rtl" />
                        <input className="btn" type="button" value="덧셈" onClick={this.btnClick.bind(this)}/>
                        <br />
                        <span>x+y:</span>
                        <span ref="resultInput">{this.state.result}</span>
                    </div>  
        // 사용자 입력값이 바뀔 경우 onChange 설정해주기
        // onChange에게 this.xInputChange 함수 위임

        return el;
}

예제 2) - 스타일 변경

// state 기반의 프로그래밍을 이해하고 있는지
// react에서 style을 처리하는 방법
class Photo extends React.Component { 
    constructor() {
        super(); 
        this.state = { 
            width: "300px",
            borderWidth: "5px",
            borderColor: "rgb(252, 198, 194)",
            borderStyle: "solid"
        };
    }

    render() { 
        // 옆으로 길어지는 객체의 변수를 따로 두자
        let imgStyle = {width: this.state.width, height: "400px", 
                        borderWidth: this.state.borderWidth,
                        borderColor: this.state.borderColor, 
                        borderStyle: this.state.borderStyle
                    };

        return <section>
                    <div>
                        <label>너비: </label>
                        <input type="text" value={this.state.width} onChange={(e) => {this.setState({width: e.target.value})}}/>
                        <label>경계선 색상:</label>
                        <input type="text" value={this.state.borderColor} onChange={(e) => {this.setState({borderColor: e.target.value})}}/>
                        <label>경계선 두께:</label>
                        <input type="text" value={this.state.borderWidth} onChange={(e) => {this.setState({borderWidth: e.target.value})}}/>
                    </div>
                    <div>
                        <img src="hera.jpg" style={imgStyle}></img>
                    </div>
                </section>;
    }
}

// react DOM 사용하기
ReactDOM.render(<Photo />, document.querySelector("#root"));

🐥 마무리

독립서점 맵 서비스 프로젝트가 한창이라 블로그에는 그날 나갔던 수업 예제 코드만 남기는 게 아쉽고 눈엣가시다...
하지만 프로젝트를 하면서 느꼈던 점들, 해결했던 오류들을 꼭 내 글로 다시 작성해보는 시간이 정말 중요하다고 느낀다. 그러니 아무리 바빠도 조금이라도 시간을 내서 프로젝트 진행 중 발생했던 오류, 우리 조원들 또는 다른 조원분들의 도움을 받아 해결했던 방법들을 기록하는 시간을 꼭 가지자