[TIL] React 조건부렌더링, 리스트 및 폼 전송 기능 (23.12.30 - 12일차)

학습내용

---

조건부 렌더링

3가지 방법
1. modalIsVisible ? () : null ⇒ 참이면 : 기준 왼쪽 콘텐츠 출력 거짓이면 오른쪽
2. if 활용
3. &&활용 : true일때만 콘텐츠 출력

cf. 프로퍼티 네임 지을때도 동작에 관련한 네이밍은 on을 붙이자.

폼 전송 기능 구현

• 전송시 모달창 닫기
• 입력된 두 값 가져오기
• 목록에 포스트 추가 (동적으로 출력)

구현 순서

1. 전송 기능 추가

   • onSubmit 속성으로 이벤트함수 수신하기 NewPost 컴포넌트에 있는 폼태그
     
   • submitHandler 만들기 (클라이언트 쪽 검증 코드 추가 및 상태갱신을 사용해 유효성 검증 ⇒ 정규강의 듣기 )
     
   • preventDefault적용 왜? 폼이 전송처리되면 submit이벤트가 트리거되어 브라우저는 자동으로 HTTP 요청을 서버에 보내버린다. ⇒ HTTP 요청을 보내버리니 페이지가 리로딩된다. ⇒ 지금 우리는 프론트 작업만 하고 있으니까 이렇게 동작 안하도록!
     

2. ★ Post 목록 동적으로 추가하기

   • 부모에 있는 상태정의코드, 이벤트함수 NewPost 컴포넌트로 가져오기.
   • 추가하는 함수 만들기
     useState활용해서 상태배열에 추가해서 구현했지만, 이건 최적화된 코드가 아니다!
     ⇒ 새로운 상태가 이전 상태값을 바탕으로 한 것이라면, setPosts()에 애로우함수 넘겨줘야한다.
     ⇒ 왜??
     리액트 내부에서는 상태 업데이트 함수를 곧바로 실행하는게 아니다!
     업데이트가 서로 얽혀서 일어날때 이전 버전의 상태를 기반으로 잘못된 업데이트를 할 수 도 있다.
     

   // 폼 제출시 포스트 추가하는 함수
     const addPostHandler = (postData) => {
       setPosts((existingPosts) => [postData, ...existingPosts]);
       console.log(posts);
     };

   • 리스트 렌더링시 key 프로퍼티가 필요한 이유

     컴포넌트에서 꼭 받아서 처리해야하는 프로퍼티가 아님, react가 제공하는 특수한 내장 프로퍼티이다.