생활코딩 리액트 2일차

7.state

prop과 State의 차이점.
→prop은 컴포넌트를 사용하는 외부자를 위한것
state는 컴포넌트를 사용하는 내부자를 위한것.

특정 모드일 때 컴포넌트를 바꿔보자.

function App() {

const mode = 'WELCOME' // 모드가 WELCOME이다.
let content = null; // Content가 null

if(mode === 'WELCOME') // 모드가 WELCOME이라면
{
   content = <Article title="Welcome" body="Hello, WEB"></Article>; // content에 컴포넌트 저장
} else if(mode === 'READ') // READ라면
{
	content = <Article title="READ" body="Hello, WEB"></Article>; // 컴포넌트 저장
}

return (
	{content}
);
}

State를 사용해보자

1. useState를 import 해주기

   import { useState } from "react";

2. useState에 값 주기.

const [mode, setMode] = useState('WELCOME');

3. 값을 바꿀때는 setMode로 바꿔야 한다.

<List topics={topics} onChangeMode={(id) => { setMode("READ");}}>

Header title="REACT" onChangeMode={function (e) { e.preventDefault(); setMode("WELCOME");

List를 누르면 READ / Header를 누르면 WELCOME

주의사항 숫자로 지정한 값이어도 태그의 속성으로 넘기면 문자가 된다.

Number()함수를 사용하여 문자 → 숫자로 변환이 가능하다.

간단하게 Create해보기

1.CREATE 모드 만들어주기.

else if(mode === 'CREATE') {
	 content = <CREATE onSubmit={(_title, _body) => {
     	const newTopic = {id: nextId, title: _title, body: _body}; // 받아온 값을 넣어줍니다.
        const newTopics = [...topics] // [...의 이름]은 해당 객체를 복제하는 의미입니다.
        newTopics.push(newTopic); // 복제한 newTopics에 추가한 내용인 newTopic을 넣어줍니다.
        setTopics(newTopics); // newTopics를 setTopics에 넣어 topics값을 갱신해줍니다.
        setMode("READ"); // 토픽을 추가했다면 READ 모드로 전환합니다.
        setId(nextId); // Id를 nextId로 바꿉니다.
        setNextId(nextId +1); // NextId값에 1을 추가해줍니다 // 다음id값이랑 겹치지 않기 위해
     }}><CREATE> // 새롭게 CREATE컴포넌트를 만들어서 content에 넣어줘야  합니다.
}

2.CREATE 컴포넌트

function CREATE(props) {
	return (
    	<article>
        	<h2>Create</h2> // 지금 모드가 무슨 모드인지 나타내는 용도입니다.
            
            <form onSubmit={(e)=> {
            	e.preventDefault();
                const title = e.target.title.value // name이 title인 값을 가져옵니다.
                const body = e.target.body.value // name이 body인 값을 가져옵니다,
                props.onSubmit(title, body);
            }}
               <p>
                <input type="text" name="title" placeholder="title을 적어주세요" /> // title영역
              </p>
              <p>
                <textarea name="body" placeholder="body">
                  본문을 입력
                </textarea> // body영역
              </p>
              
              <p>
              	<input type="submit" value="Create" /> //전송 역할.
              </p>
            </form>
        </article>
    );
}

결과.

학습하면서 새롭게 배운 내용.

중요도 ★★
onSubmit은 submit버튼을 클릭했을 때 일어나는 이벤트.

중요도 ★★★
PRIMITIVE 타입 : string, number, bight, boolean, undefined, symbol, null 7가지가 있다.
이중에 중요한것은 string, number, boolean, null정도

중요도 ★★★★★
Object 타입 : objec, array; // 위에 말한 PRIMITIVE와는 다른 방식으로 set을 설정
방법
→ newValue = {...value} // 중괄호{...value} == value를 복제한다.
newValue변경
setValue(newValue) == 새로운값이 들어간다.

오늘의 TIL 끝!!

내일 배울 내용

업데이트!
삭제!