44일차(2)/React(6) : jsx 객체 활용, setState 함수 실습

44일차(2)/React(6) : jsx 객체 활용, setState 함수 실습

 

App04.js

//App04.js

import { Component } from "react";

class App extends Component{
    state={
        isRun:false
    }

    render(){
        const myName="kim";
        const myP= <p>p2입니다.</p>;
        let isRun=false;

        return(
            <div className="container">
                <h1>jsx 객체 활용하기</h1>
                {"kim"}
                <br />
                {myName}
                <br />
                <p>p1입니다.</p>
                {myP}
                <h2>아래가 달려요 인지 달리지 않아요 인지 확인!</h2>
                { true ? <p>달려요</p> : <p>달리지 않아요</p> }
                <h2>아래가 달려요 인지 달리지 않아요 인지 확인!</h2>
                { isRun ? <p>달려요</p> : <p>달리지 않아요</p> }
                <h2>state 값 활용</h2>                
                달리려면 체크 <input type="checkbox" checked={this.state.isRun} onChange={this.handleChange} />
                <br />
                { this.state.isRun ? <p>달려요</p> : <p>달리지 않아요</p> }
                <h2>아래가 로그인중인지 확인!</h2>
                { true && <p>바나나님 로그인중...</p> }
                <h2>아래가 로그인중인지 확인!</h2>
                { false && <p>바나나님 로그인중...</p> }
                <h2>아래가 로그인중인지 확인!</h2>
                { this.state.isRun && <p>바나나님 로그인중...</p> }
            </div>
        )
    }
    //체크박스에 체크 상태가 변했을 때 호출되는 함수
    handleChange = (e)=>{
        //이벤트가 일어난 체크박스의 체크 여부를 state에 반영한다.
        this.setState({
            isRun: e.target.checked
        });        
    }
}

export default App;

 

- div의 { } 안에다가 출력하기. 100, "kim" 등은 출력된다.

- { } 안에 ()=>{} 함수를 넣으면 출력되는 값이 없다. 무시한다.

 

- <p>요소를 넣으면? 만들어진다.

- jsx객체가 만들어지면 그 객체를 참고해서 화면 구성이 만들어진다.

 

const myP= <p>p2입니다.</p>;

- 변수안에 jsx를 갖고 있어도 그냥 원하는 위치에 넣을 수 있다.

 

- 어떤 값을 출력하거나 출력하지 않으려면? vue에서는 v-if를 썼는데 여기서는 좀 다르다.

- { } 안에서 3항연산자를 이용해서 출력하거나 출력하지 않는 작업도 할 수 있다.

 

 

- boolean 값이 들어있는 state를 이용해서 출력하거나 하지 않을 수 있다.

 

 

- 체크박스 형태로 수정하기

- 그런데 지금은 state에서 값이 isRun:false로 고정되어 있으므로 체크하려도 해도 되지 않는다.

- 상태값이 안바뀌었기 때문에. setState() 하지 않으면 계속 false인 상태인 것!

 

 

- 아래에 체크박스에 이벤트 발생시 호출할 함수를 만들어준다.

- e.target.checked를 하면 체크된 상태를 알아낼수있다.

 

handleChange = (e)=>{
    this.setState({
        isRun: e.target.checked
    });        
}

- setState() 안에 값을 object 타입으로 전달하기 (변수명을 key값으로 사용해서 작성한 것)

 

- 이제 체크 여부에 따라 아래의 p 요소 값이 달라진다.(동적으로 변화한다)

 

 

{ xxx && <p>바나나님 로그인중...</p> }

- 이 경우 xxx 위치에 false가 참조되면 출력하지 않는다.

 

- 하나의 값을 렌더링할때는 && 으로 작성할 수도 있다.

- 양자택일로 둘 중 하나의 값이 반드시 나와야 할 때는 3항연산자로 표현.

 

- return의 { } 안에서 3항연산자와 &&를 활용하는 연습!

 

 

---

 

App04_ex1.js

//App04_ex1.js

import { Component } from "react";

class App extends Component{
    state={
        weapon: "gun"
    }

    render(){
        return(
            <div className="container">
                <h3>무엇으로 공격할지 선택하세요</h3>
                <select value={this.state.weapon} onChange={this.handleChange}>
                    <option value="gun">총</option>
                    <option value="sword">칼</option>
                    <option value="arrow">활</option>
                </select>
                <p> <strong>{this.state.weapon}</strong> 으로 공격합니다.</p>
            </div>

        )
    }
    handleChange = (e)=>{
        //선택된 value 값을 읽어와서 weapon state 값을 변화시킨다.
        this.setState({
            weapon:e.target.value
        })
    }
}

export default App;

 

- state 값이 고정 상태이므로 옵션 중 다른것을 선택해도 바뀌지 않는다.

 

handleChange = (e)=>{ 
    this.setState({
        weapon:e.target.value
    })
}

- handleChange 함수에 매개변수 e로 target의 값을 읽어와서 state를 재설정한다.

 

 

---

 

App04_ex2.js

//App04_ex2.js

import { Component } from "react";

class App extends Component{   
    render(){
        let menu=[
            {id:1, name:"김밥"},
            {id:2, name:"라면"},
            {id:3, name:"떡볶이"},
            {id:4, name:"만두"},
            {id:5, name:"우동"}
        ]
        
        const newArray=menu.map((item)=>{
            //item은 {id:x, name:x}형태의 object이다.               
            return <label key={item.id}>{item.name} <input type="checkbox" /></label>;
        });

        return(
            <div className="container">
                <h3>먹고싶은 분식 메뉴를 체크하세요.</h3>
                {newArray}                 
            </div>
        )
    }
}

export default App;

 

- 레이블과 체크박스. 위에있는 menu 를 참고해서 출력하기

 

- map(()=>{}) : 이 함수는 배열의 갯수만큼 호출된다.

- label에도 키 값을 전달해주기! 경고 창이 나오므로..

 

- {newArray} 에서 출력한다.

 

 

- 만일 이 배열을 상태값으로 관리하고 싶다면?

state={
    menus:[]
}

- 이렇게 state에 빈 배열을 넣어서 추가해주면 된다.