[React.js] 리액트의 Create 기능

 

코드 밑에 <a>태그를 만든다.

클릭을 했을 때(onClick) setMode를 CREATE로 바꾼 후 else if 로 다시 처리해줄 것이다.

 

웹페이지 동작이 어떻게 되냐면

Hello, WEB 밑에 Create 버튼을 누를 때

 

 

이런모양으로 바뀌게 된다.

코드를 다시 보자.

 

 

else if문으로 mode === 'CREATE' 인 경우에 content 값을 바꿔준다.

<Create></Create>라는 컴포넌트를 작성할거다.

가운데 보이는건 나중에 다시 설명하고 컴포넌트를 만들자.

 

 

 

 

Create를 눌렀을 때 나오는 화면이다.

두번째 빨간박스의 name으로 지정된 title과 body는 매개변수로 사용될 것이기 때문에

form 태그로 감싸져 있다.

 

event.preventDefault(); 는 새로고침을 막기 위해 일부러 쓴 것이고

event.target은 이벤트를 발생시킨 주체인 form 태그를 가르킨다.

form 태그를 기준으로 name이 title과 body에 입력된 값을 value로 뽑아서

각각의 변수에 담아주고

props.onCreate에 title과 body를 담는다.

 

위에 만들어져 있는 컴포넌트 Create에 onCreate={(_title, _body)=> { .... } } 부분에 값이 넘어오게 된다.

 

 

 

topics 변수를 보면 각각의 배열에 id, title, body 값이 들어가는 것을 볼 수 있다.

 

 

 

실습을 따라하느라 코드가 저렇게 되버렸는데

 

newTopics를 먼저 보면 된다.

 

새로 만든 변수인 newTopics에는 기존에 설정된 topics 의 값이 들어간다. 

1, 2, 3 이 들어간다고 보면 된다.

 

그 뒤에 newTopics에 newTopic 이라는 변수가 새로 들어간다.

1, 2, 3 뒤에 4가 추가되서 1, 2, 3, 4가 된다.

 

노란색 부분으로 된 변수들이 중요한데

상태를 변경해주는 애들이다.

 

newTopics가 총알을 장전한 상태라면 

setTopics는 장전된 총알을 발사.... 아무튼 저장된 값을 반영해준다.

 

setMode('READ')는 상태가 변경된 후에 변경된 화면을 보여주기 위해 넣은거고

nextId의 값을 +1 증가시키는 연산을 추가해준다.

 

 

 

 

작성한 내용이 추가됐다.