[React] study (조건부렌더링) #4일차

📖 참고 서적:

소플의 처음 만난 리액트 

📆  진행

chapter 9 조건부 렌더링 ✅

chapter 10 리스트와 키 ✅

chapter 11 폼 ✅

 

---

09.조건부 렌더링

 

조건부 렌더링

조건에 따라 렌더링의 결과가 달라지도록 하는 것

 

엘리먼트 변수

리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법

 

인라인 조건

조건문을 코드 안에 집어넣는 것

- 인라인if : &&사용

- 인라인if-else : 삼항연산자 사용

 

컴포넌트 렌더링 막기

null을 리턴한다.

 

실습코드

toolbar.jsx

import React from "react";

const styles={
    wrapper:{
        padding:16,
        display:"flex",
        flexDirection:"row",
        borderBottom:"1px solid grey"
    },
    greeting:{
        marginRight:0
    }
};

function Toolbar(props){
    const {isLoggedIn,onClickLogin,onClickLogout}=props;

    return(
        <div style={styles.wrapper}>
            {isLoggedIn && <span style={styles.greeting}>환영합니다</span>}

            {isLoggedIn?(<button onClick={onClickLogout}>로그아웃</button>):
            (<button onClick={onClickLogin}>로그인</button>)}
        </div>
    );
}

export default Toolbar;

LandingPage.jsx

import React,{useState} from "react";
import Toolbar from "./Toolbar";

function LandingPage(props){
    const [isLoggedIn,setIsLoggedIn]=useState(false);

    const onClickLogin=()=>{
        setIsLoggedIn(true);
    };
    const onClickLogout=()=>{
        setIsLoggedIn(false);
    };

    return(
        <div>
            <Toolbar
                isLoggedIn={isLoggedIn}
                onClickLogin={onClickLogin}
                onClickLogout={onClickLogout}
            />
            <div style={{padding:16}}>sh와 함께하는 리액트 공부!</div>
        </div>
    );
}
export default LandingPage;

 

---

10 리스트와 키

 

리스트

같은 아이템을 순서대로 모아놓은 것

키

각 객체나 아이템을 구분할 수 있는 고유한 값

여러 개의 컴포넌트 렌더링

자바스크립트 배열의 map()함수 사용

- 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 결과(엘리먼트)를 배열로 만들어서 리턴함

- map()함수 안에 있는 엘리먼트는 꼭 키가 필요함

*map()함수

한쪽에 있는 아이템과 다른 한쪽에 있는 아이템을 짝지어 준다는 의미

배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것

 

리스트의 키

리스트에서 아이템을 구분하기 위한 고유한 문자열

리스트에서 어떤 아이템이 변경,추가 또는 제거되었는지 구분하기 위해 사용

리액트에서는 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됨

 

실습코드

import React from "react";

const students=[
    {
        id:1,
        name:"James"
    },
    {
        id:2,
        name:"Steve"
    },
    {
        id:3,
        name:"Mina"
    },
    {
        id:4,
        name:"Stella"
    }
];

function AttendanceBook(props){
    return(
        <ul>
            {students.map((student)=>{
                return <li key={student.id}>{student.name}</li>
            })}
        </ul>
    );

}

export default AttendanceBook;

 

---

11 폼

폼이란?

사용자로부터 입력을 받기 위해 사용하는 양식

리액트 컴포넌트는 내부에서 state를 통해 데이터를 관리 

 

제어 컴포넌트

사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트

즉, 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트

 

input type="text" 태그

한 줄로 텍스트를 입력받기 위한 HTML태그

value라는 attribute로 입력된 값을 관리

 

textatea태그

여러 줄에 걸쳐서 나올 정도로 긴 텍스트를 입력받기 위한 HTML태그

<textatea value={value} onChange={handleChange}/>

state로는 value가 있고, 이 값을 textarea태그의 value 라는 attribute에 넣어줌으로써 화면에 나타나게 된다.

value라는 attribute로 입력된 값을 관리

 

select태그

드롭다운 목록을 보여주기 위한 HTMLxorm

여러 옵션 중 하나를 선택할 수 있는 기능을 제공한다

리액트에서는 select태그에 value라는 attribute를 사용하여 값을 표시한다

value라는 attribute로 선택된 옵션의 값을 관리

<select value={value} onChange={handleChange}>
	<option value="dog">강아지</option>
    <option value="cat">고양이</option>
    <option value="pig">돼지</option>
</select>

 

목록에서 다중으로 선택이 되도록 하려면 multiple이라는 속성값을 true로 하고, value로 선택된 옵션의 값이 들어있는 배열을 넣는다

<select multiple={true} value={['dog','pig']}>

 

File input태그

<input type="file/>

읽기전용, 즉 비제어 컴포넌트

디바이스의 저장 장치로부터 사용자가 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML태그

서버로 파일을 업로드하거나 JS의 FileAPI를 사용해서 파일을 다룰때 사용

 

여러 개의 입력 다루기

여러 개의 state를 선언하여 각각에 입력에 대해 사용한다.

 

소스코드

import React,{useState} from "react";

function Reservation(props){
    const [haveBreakfast,setHaveBreakfast]=useState(true);
    const [numberOfGuest,setNumberOfGuest]=useState(2);

    const handleSubmit=(e)=>{
        alert(`아침식사 여부:${haveBreakfast},방문객 수:${numberOfGuest}`);
        e.preventDeafault();
    }

    return(
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    아침식사 여부:
                    <input 
                        type="checkbox"
                        checked={haveBreakfast}
                        onChange={(e)=>{
                            setHaveBreakfast(e.target.checked);
                        }}/>
                </label>
                <br/>
                <label>
                    방문객 수:
                    <input  
                        type="number"
                        value={numberOfGuest}
                        onChange={(e)=>{
                            setNumberOfGuest(e.target.value);
                        }}/>
                </label>
                <button type="submit">제출</button>
            </form>
        </div>
    );
}

export default Reservation;

 

input Null value

prop은 넣되, 자유롭게 입력할 수 있게 만들고싶다면 값에 undefined 또는 null을 넣는다.

<input value={null} />

 

실습코드 (사용자 정보 입력받기)

import React,{useState} from "react";

function SignUp(props){
    const[name,setName]=useState("");
    const[gender,setGender]=useState("여자");

    const handleChangeName=(event)=>{
        setName(event.target.value);
    };

    const handleSubmit=(event)=>{
        alert(`이름 : ${name} 성별 : ${gender}`);
        event.preventDeafault();
    };

    const handleChangeGender=(event)=>{
        setGender(event.target.value);
    }

    return(
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    이름:
                        <input type="text" value={name} onChange={handleChangeName}/>
                </label>
                <br/>
                <label>
                    성별:
                        <select value={gender} onChange={handleChangeGender}>
                            <option value="남자">남자</option>
                            <option value="여자">여자</option>
                        </select>
                </label>
                <button type="submit">제출</button>
            </form>
        </div>
    );
}

export default SignUp;