생활코딩 react강의 5장

Create

기존 페이지에서 create버튼으로 내용을 추가하면 기존 객체배열이 추가되게끔 해보자.

적용할 것

1) Create를 누르면 mode가 CREATE로 바뀐다.
Create링크에 onClick이벤트를 설정하고, 링크를 눌렀을 때 새로고침이 일어나지 않게 preventDefault()를 써주고, setMode('CREATE')를 써서 mode변경이 되게끔 한다.

// App컴포넌트

return (
	...
    <a href="/create" onClick={event=>{
    	event.preventDefault();
        setMode('CREATE');
    }}>Create</a>
)

2) Create에 해당되는 UI가 나타난다.
이미 선언해놓았던 if문에 mode가 'CREATE'일 경우, content가 Create컴포넌트 내용으로 변경되도록 선언하자.

// App컴포넌트

else if (mode === 'CREATE') {
	content = <Create></Create>
}

3) Create컴포넌트에 form태그를 써서 변경할 내용을 입력할 form을 만든다.

// Create컴포넌트

function Create(){
	return <article>
    	<h2>Create</h2>
        <form>
        	<p><input type="text" name="title" placeholder="title"/></p>
            <p><textarea name="body" placeholder="body"></textarea></p>
            <p><input type="submit" value="Create"></input></p>
        </form>
    </article>
}

4) 2)에서 만든 if문의 Create태그에 onCreate라는 임의의 속성을 지정하고, title과 body를 매개변수로 받는 함수를 작성한다.
그리고 Create컴포넌트에 form태그에 onSubmit이벤트를 생성하고, 새로고침이 일어나지 않게 preventDefault()를 쓰고, 클릭했을 때 form에 기록된 내용을 가지고 올 수 있게끔 상수 title과 body를 선언한 후에, App컴포넌트의 Create태그 onCreate속성으로 값을 보내기 위해 매개변수 props를 선언하고, props를 써서 title과 body를 보낸다.

// Create컴포넌트

function Create(props){
	return <article>
    	<h2>Create</h2>
        <form onSubmit={event=>{
        	event.preventDefault();
            const title = event.target.title.value;
            const body = event.target.body.value;
            props.onCreate(title, body);
        }}>
		...

// App컴포넌트

else if (mode === 'CREATE') {
	content = <Create onCreate={(_title, _body)=>{
    
    }}></Create>
}

5) topics객체배열에 Create로 작성한 내용을 추가하기 위해 topics를 useState로 승격시킨다. Create태그의 onCreate속성 함수에 새로운 상수를 선언한 후에 topics객체와 형식이 맞게 title과 body 키값을 선언하고, 매개변수인 _title과 _body를 받아오게끔 적어준다. 그리고 id값을 별도로 관리하기 위해 useState를 선언해준다. 그리고 지금 객체배열에 id가 3까지 있으니 초기값을 4로 지정해준다. 그런 다음 newTopic상수에 id값을 방금 만든 state로 지정해준다.

// App컴포넌트
...
const [nextId, setNextId] = useState(4);
...
else if (mode === 'CREATE') {
	content = <Create onCreate={(_title, _body)=>{
		const newTopic = {id: nextId, title:_title, body:_body}    
    }}></Create>
}

그럼 topics에 newTopic를 추가하려면 어떻게 해야할까?

const [value, setValue] = useState(PRIMITIVE);
PRIMITIVE : string, number, bigint, boolean, undefined, symbol, null

위와 같은 상황이라면 그냥 추가해도 무방하다. 하지만, 객체라면 말이 달라진다.

const [value, setValue] = useState(Object);
Object : object, array

객체일 경우에는 새로운 변수를 선언하여 거기에 value값을 복제해야한다. 객체값을 복제해오려면 '...'선택자를 사용하여 가져온다. 그리고 setValue에 새로운 변수를 지정하면 그제서야 컴포넌트가 다시 실행된다.

newValue = {...value};
setValue(newValue);

6) 위와 같은 방법으로 topics배열에 newTopic를 추가해보자.

// App컴포넌트
...
else if (mode === 'CREATE') {
	content = <Create onCreate={(_title, _body)=>{
		const newTopic = {id: nextId, title:_title, body:_body}
        const newTopics = [...topics]
        newTopics.push(newTopic);
        setTopics(newTopics);
    }}></Create>
}

7) 추가 후에 form이 사라지고 우리가 새로 추가한 데이터를 바로 볼 수 있게 바꾸려면 어떻게 해야할까? mode를 READ로 바꾸고, id를 nextID로 지정, NextId를 지금 값+1을 해주면 잘 실행이 되는 걸 볼 수 있다.

// App컴포넌트
...
else if (mode === 'CREATE') {
	content = <Create onCreate={(_title, _body)=>{
		const newTopic = {id: nextId, title:_title, body:_body}
        const newTopics = [...topics]
        newTopics.push(newTopic);
        setTopics(newTopics);
        setMode('READ');
        setId(nextId);
        setNextId(nextId+1);
    }}></Create>
}