create로 새로운 글이 생성되고 상세보기 또한 생성
1. create 페이지로 이동하는 링크를 만들기
<a href="/create">Create</a>
2. mode의 값을 바꿔서 페이지를 바꾸기 때문에 mode를 바꿔야 한다.
event.preventDefault(); 는 클릭했을 때 url이 바뀌지 않도록 처리하는 것
3. setMode('CREATE'); 모드 값을 바꾼다.
4. else if에 mode가 CREATE일 때 어떻게 컨텐트 값이 바뀌는지 넣는다.
5. 별도의 create 컴포넌트를 만든다.
6. 어떤 정보를 서버로 전송할 때 쓰는 html 태그는 form이다.
7. html에서 여러 줄을 표시할 때는 textarea 태그를 사용한다.
8. 전송할 때 쓰는 컨트롤은 submit이다.
9. create를 눌렀을 때 후속 작업을 할 수 있는 인터페이스를 만든다.
10. form 태그에 onSubmit의 이벤트를 실행시키면 페이지가 리로드 되어서 event.preventDefault();로 리로드를 막는다.
11. form 태그에 소속되어있는 name이 title과 name이 body 인 것의 value를 가져와야 한다. const title = event.target.title.value;, const body = event.target.body.value;
12. function Create에 props를 받아서 props.onCreate(title, body); 작성
13. 읽기, 쓰기를 위해서 const [topics, setTopics] = useState()
'Frontend > React' 카테고리의 다른 글
[생활코딩] state(에러) (0) | 2022.09.26 |
---|---|
[생활코딩] 이벤트 (0) | 2022.09.26 |
[생활코딩] props (0) | 2022.09.26 |
[생활코딩] 컴포넌트 만들기 (0) | 2022.09.25 |
[생활코딩] 소스 코드 수정 방법 (0) | 2022.09.25 |