Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS
06. 미니프로젝트-2W

08. SpringFramework , SrpingBoot 
19. 중간프로젝트 (1M)
10. Linux 명령어
11. AWS
12. Docker
13. Kubernetes
14. React JS (v)
15. App - Android
16. 최종프로젝트 (1M)

---

React(리액트)

컴포넌트

• 리액트의 컴포넌트 형태 -> Tree구조
• 컴포넌트는 함수형, 클래스형 2가지

• 함수형

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• 클래스형

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 컴포넌트 합성

function App() {

    return (
        <>
            <MyComponent />
            <MyComponent />
            <MyComponent2/>
        </>
    )
}

Props

• 상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수
• 하위 컴포넌트에서는 첫번째 매개변수로 props를 받을 수 있음
• 하위 컴포넌트에서 사용할 때는 {}를 이용해 값을 받을 수 있음
• 상위 컴포넌트에서는 컴포넌트의 속성값을 동일이름으로 지정

//상위(App.js)
function App() {

    return (
        <>
            <MyComponent name={"홍길동"} age={20}/>
            <MyComponent name={"이순신"} age={30}/>
            <MyComponent2/>
        </>
    )
}

// 하위(MyComponent.js)
function MyComponent({name,age}){

  //const {name,age} = a;

  return (
    <div>
      <p>이름은 {name}이고 나이는 {age}입니다.</p>
      <img src = "/logo192.png" alt = "이미지" width={100}/>
    </div>
  )
}

State

• 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값 의미
• state가 체인지되면 변화를 감지하여 리렌더링 수행
• 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다름
• 함수형 컴포넌트에서는 Hook개념을 이용해 더욱 쉽게 사용 가능

훅(Hook)

useState(초기값) - 함수(hook)

• useState() : 배열반환
• 첫번째 배열의 요소에는 현재값, 두번째 요소는 상태를 변경하는 setter를 반환

const [data, setData] = useState('초기값')

• state는 어떤 타입이던 상관없음 (ex : str, number, object ...)
• state는 여러개일 수도 있음
• state는 직접 수정하면 안되고 setter를 사용해야 함

function MyState(){

    // 함수형 컴포넌트에서는 useState() 훅으로 state 관리
    const [color,setColor] = useState('black')

    const red = () => {
        // 값을 변경할때는 setter를 이용해서 변경
        setColor('red');

        // color = 'red'; // 화면을 리렌더링을 수행하지 않음( 직접 state를 바꾸면 안됨)
    }

    const blue = () => setColor("blue");
    
    return(
        <>
            <h3 style=>현재 색상{color}</h3>
            <button type="button" onClick={red}>붉은색</button>
            <button type="button" onClick={blue}>푸른색</button>
            <button type="button" onClick={ () => setColor("yellow") }>노란색</button>
        </>

    )
}

• onClick={ () => setColor("yellow") } 이부분에서 onClick={setColor("yellow")}로 쓰면 동작되지 않음
• onClick={setColor("yellow")} 형태로 작성시 즉 setColor("yellow")가 즉시 실행함수가 되어 해당 함수가 실행된 값이 onClick의 값으로 들어감
• 따라서 onClick={ () => setColor("yellow") }형태로 작성하여 새 함수형태로 만들어 onClick에 매칭시켜주어야 함

이벤트(Event)

• 이벤트의 이름은 전부 카멜 표기법으로 표현
• 이벤트를 전달할 떄는 (함수) 형태로 사용

// 1. 인풋값을 state로 관리
    const [nick,setNick] = useState('');
    const [todo, setTodo] = useState('');

    const handleNick = (e) => {
        setNick(e.target.value);
    }

    const handleClick = () =>{
        alert(`${nick}님의 오늘의 할일은 ${todo}입니다.`)
    }

    const handleKeyUp = (e)=>{
            if(e.key=='Enter'){
                handleClick();
            }
            return;
    }

    const [menu,setMenu] = useState('햄버거');

    const handleMenu = (e)=>{
        setMenu(e.target.value);
    }
    return(
        <>

            <h3>셀렉트 태그 핸들링(실습)</h3>
            <p>셀렉트 태그가 체인지 될 때 선택한 결과를 아래에 출력</p>
            <select onChange={handleMenu}>
                <option value="피자">피자</option>
                <option value="햄버거">햄버거</option>
                <option value="치킨">치킨</option>
            </select>

            <h3>선택한 결과</h3>
            <p>{menu}</p>
            {/* 사용자가 버튼을 클릭하면, 이름, 할일 경고장으로 출력 */}
            <h3>리액트 이벤트</h3>

            <label>이름</label>
            <input type="text" 
                   onChange={handleNick} 
                   value={nick} 
                   onKeyUp={handleKeyUp}/>


            <label>할일</label>
            <input type="text" 
                   onChange={(e)=>{setTodo(e.target.value)}} 
                   value={todo}
                   onKeyUp={handleKeyUp}
                   />
        
            <button type='button' onClick={handleClick}>오늘의 할일은?</button>
        </>
    )

}

• state로 객체 관리

function EventComponent2(){


    const [data,setData] = useState({name:'',todo:''});

    const handleChange = (e) => {
        let value = e.target.value;
        let key = e.target.name;
        //if(e.target.name=='name'){setData({name:value})}
        //else if(e.target.name=="todo"){setData({todo:value})}

        let newData = {...data,[key]:value }; // obj를 복사한 후 키:값 으로 변경
        setData(newData);
    }
    return(
        <>
            <h3>state로 객체 관리하기</h3>
            <input tpye="text" placeholder="이름"
                   name="name"
                   onChange={handleChange}
                   value={data.name}/>

            <br/>

            <input tpye="text" placeholder="할일" 
                   name="todo"
                   onChange={handleChange}
                   value={data.todo}/>

            <br/>
            현재 사용자가 입력한 값 : {data.name} : {data.todo}
            <br/>

        </>
    )
}

• 실습

function EventComponentQ2(){


    const [data,setData] = useState({input:'',result:''});


    const handleData = (e) =>{
        setData({...data,input:e.target.value});
    }

    const clickData = () =>{
        setData({result:data.input,input:''});
    }
    return(
        <>
            <h1>인풋데이터 핸들링(실습)</h1>
            <p>클릭시 데이터는 공백으로 결과는 인풋이 입력한 값으로 처리</p>
            <input type="text" onChange={handleData} value={data.input}></input>
            <button onClick={clickData}>추가하기</button>

            <h3>결과</h3>
            {data.result}
        </>
    )
}