[React] Day4 - 설문조사 / 일련번호 / 영화포스터 / 스타벅스 메뉴판

윤수인·2024년 3월 20일
0

📒국비학원 [React]

목록 보기
3/14
post-thumbnail

⭐ filter() 함수

: 요소를 걸러서 모든 요소를 모아 새로운 배열로 반환

ex) const words = ['배수지','유인나,'정인선'];

const result = words.filter(word => word.length > 6)'
  • 이 때, word는 사용자 정의 + 화살표 함수의 매개변수임

⭐ Map() 함수 - 반복

: 자바스크립트 배열의 내장 함수
: 파라미터로 전달된 함수를 사용해, 원하는 규칙에 따라 변환한 후 새로운 배열 생성

ex) const 함수명 = () => {
	const names = ['바람', '눈', '비'];
    const nameList = names.map((name) => <li>{name}</li>);
                               
	return <ul>{nameList}</ul>

}
  • ❌ 이렇게 되면 key props가 없다고 오류뜸
    : key값은 유일한 값 / ex) 게시글 번호 등

1. 설문조사 만들기

✏️ Test1.

💻 입력

📂C:\VSCode\react>yarn create react-app test6 폴더만들기

📂 survey 폴더 만들기

⬇️ Survey.js


import React, { useState } from 'react';
import SurveyStep1 from './SurveyStep1';
import SurveyStep2 from './SurveyStep2';
import SurveyStep3 from './SurveyStep3';
import SurveyStep4 from './SurveyStep4';
import './style.css'

const Survey = () => {

    const [step,setStep] = useState(1)

    const [form,setForm] = useState({
        name:'',age:'',addr:'',tel:'',
        job:'',email:'',gender:'',hobby:''})

    //비구조할당
    const {name,age,addr,tel,job,email,gender,hobby} = form

    const onText = (evt) => {
        const {value,name} = evt.target
        setForm({
            ...form,
            [name]:value
        })
    }

    const onNext = () => {
        setStep(state => state + 1)
    }

    const onPrev = () => {
        setStep(state => state - 1)
    }

    return (
        <div className='wrap'>
            {step===1 && <SurveyStep1 name={name} age={age} addr={addr} tel={tel} onText={onText} onNext={onNext}/>}
            {step===2 && <SurveyStep2 job={job} email={email} gender={gender} hobby={hobby} onNext={onNext} onPrev={onPrev} onText={onText}/>}
            {step===3 && <SurveyStep3 form={form} onPrev={onPrev} onNext={onNext}/>}
            {step===4 && <SurveyStep4 name={name}/>}
            
        </div>
    );
};

export default Survey;

⬇️ SurveyStep1.js

넘어오는 데이터 받을 거임

import React from 'react';

const SurveyStep1 = ({name,age,addr,tel,onText,onNext}) => {
    return (
        <>
            <p>
                <label>이름</label>
                <input type="text" value={name} name='name' onChange={onText}/>
            </p>
            <p>
                <label>나이</label>
                <input type="text" value={age} name='age' onChange={onText}/>
            </p>
            <p>
                <label>주소</label>
                <input type="text" value={addr} name='addr' onChange={onText}/>
            </p>
            <p>
                <label>연락처</label>
                <input type="text" value={tel} name='tel' onChange={onText}/>
            </p>
            <p>
                <button onClick={onNext}>다음</button>
            </p>
        </>
    );
};

export default SurveyStep1;

⬇️ SurveyStep2.js

import React from 'react';

const SurveyStep2 = ({job,email,gender,hobby,onText,onNext,onPrev}) => {
    return (
        <>
            <p>
                <label>직업</label>
                <input type="text" value={job} name='job' onChange={onText} />
            </p>
            <p>
                <label>이메일</label>
                <input type="text" value={email} name='email' onChange={onText} />
            </p>
            <p>
                <label>성별</label>
                <input type="text" value={gender} name='gender' onChange={onText} />
            </p>
            <p>
                <label>취미</label>
                <input type="text" value={hobby} name='hobby' onChange={onText} />
            </p>
            <p>
                <button onClick={onPrev}>이전</button>
                <button onClick={onNext}>다음</button>
            </p>
        </>
    );
};

export default SurveyStep2;

⬇️ SurveyStep3.js

마지막 결과창

import React from 'react';

const SurveyStep2 = ({form,onNext,onPrev}) => {

    //비구조할당
    const {name,age,addr,tel,job,email,gender,hobby} = form

    return (
        <>
            <ul>
                <li><span>이름</span>:<em>{name}</em></li>
                <li><span>나이</span>:<em>{age}</em></li>
                <li><span>주소</span>:<em>{addr}</em></li>
                <li><span>연락처</span>:<em>{tel}</em></li>
                <li><span>직업</span>:<em>{job}</em></li>
                <li><span>이메일</span>:<em>{email}</em></li>
                <li><span>성별</span>:<em>{gender}</em></li>
                <li><span>취미</span>:<em>{hobby}</em></li>
            </ul>
            <p>
                <button onClick={onPrev}>이전</button>
                <button onClick={onNext}>다음</button>
            </p>
        </>
    );
};

export default SurveyStep2;

⬇️ SurveyStep4.js

감사합니다창

import React from 'react';

const SurveyStep2 = ({name}) => {
return (
<>

        <h2>
            <span>{name}님</span>
            설문조사 감사합니다
        </h2>
    </>
);

};

export default SurveyStep2;
`

✅ 결과

2. 고유번호 처리

✏️ Test2.

💻 입력

10이내의 난수 고유번호 부여

임의의 이름을 가져와서 일련번호 부여

1번부터 시작해서 일ㄹ렬번호 생성

커서 / 데이터 입력하기

import React,{useRef, useState} from 'react';

const Test3 = () => {

    const no = useRef(1)
    //커서
    const textRef = useRef()

    const [data,setData] = useState([])
    const [text,setText] = useState('')

    const onText = (evt) => {
        const {value} = evt.target
        setText(value)
    }

    const onAdd = (evt) => {

        //엔터치고 새로고침하지마
        evt.preventDefault()

        setData([
            ...data,
            {
                id:no.current++,
                text:text
            }
        ])
        setText('')
        textRef.current.focus()
    }

    return (
        <div>
            <form onSubmit={onAdd}>
                <input type='text' onChange={onText} value={text} name='text' ref={textRef}/>
                <button>추가</button>
            </form>
            <ul>
                {
                    data.map(item => <li key={item.id}>
                        {item.id} / {item.text}
                    </li>)
                }
            </ul>
        </div>
    );
};

export default Test3;

3. 이미지관리

✏️ Test3.

💻 입력

이미지 넣기

src 안에 있는 이미지 가져오는 방법

: 변수명 써서 import

public 안에 있는 이미지 가져오는

: public은 직접 호출!!

4. 매개변수 넘기는법

✏️ Test4.

💻 입력

📂C:\VSCode\react>yarn create react-app test7 폴더만들기

일반 alert창 뜨게 하는법

###📌 매개변수 넘기는 법 = 함수형으로 묶어야함

5. 이름 삭제

✏️ Test5.

💻 입력

삭제

6. 영화포스터 + 검색

✏️ Test6.

💻 입력

⬇️ Movies.js

import React,{useState} from 'react';
import './style.css';
import MovieList from './MovieList';
import movieData from '../assets/api/movie'

const Movies = () => {

    const [data,setData] = useState(movieData)

    return (
        <div className="wrap">
            <h2>최신 개봉작</h2>
            <MovieList data={data}/>
        </div>
    );
};

export default Movies;

⬇️ MovieList.js

import React from 'react';
import MovieItem from './MovieItem';

const MovieList = ({data}) => {
    return (
        <div className="movie">
           {
            data.map(item => <MovieItem key={item.no} item={item}/>)
              
           }
        </div>
    );
};

export default MovieList;

⬇️ MovieItem.js

import React from 'react';

const MovieItem = ({item}) => {

    const {no,poster,title,actor,director,date} = item

    return (
        <article>
            <div className="left">
                <img src={poster} alt={title} />
            </div>
            <div className="right">
                <h3>{title}</h3>
                <ul>
                    <li>출연진: {actor} </li>
                    <li>감독: {director} </li>
                    <li>개봉일: {date} </li>
                </ul>
                <button>삭제</button>
            </div>
        </article>
    );
};

export default MovieItem;

7. 갤러리 (마우스클릭하면 그 사진으로 바뀌기)

✏️ Test7.

💻 입력

이렇게나, export default [데이터내용] 이렇게 쓸 수도 있음

8. 스타벅스 + 검색

✏️ Test8.

💻 입력

5번 메뉴판 반복

첫번째 문자만 대문자로 바꾸고싶을 떈

slice(1) : 1qnxj wkfmrl

📌 검색

8. 메모장 TO-DO (LIST)

✏️ Test8.

💻 입력

추가

삭제
: 삭제하려면 매개변수 id 넘겨야함

profile
윤수인
어제보다 조금 더 성장하기!
이전 포스트

[React] Day3 - 영화포스터 / 컬러선택 / 데이터 리스트 다루기

다음 포스트

[React] Day5 - Todo / 프로필 이미지

0개의 댓글