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

학습내용

---

조건부 렌더링

3가지 방법

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

 

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

폼 전송 기능 구현

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

구현 순서

1. 전송 기능 추가
   • onSubmit 속성으로 이벤트함수 수신하기
   • NewPost 컴포넌트에 있는 폼태그
   • submitHandler 만들기상태갱신을 사용해 유효성 검증 ⇒ 정규강의 듣기 )
   • (클라이언트 쪽 검증 코드 추가 및
   • preventDefault적용⇒ HTTP 요청을 보내버리니 페이지가 리로딩된다.
   • ⇒ 지금 우리는 프론트 작업만 하고 있으니까 이렇게 동작 안하도록!
   • 왜? 폼이 전송처리되면 submit이벤트가 트리거되어 브라우저는 자동으로 HTTP 요청을 서버에 보내버린다.
   2. ★ Post 목록 동적으로 추가하기
      • 부모에 있는 상태정의코드, 이벤트함수 NewPost 컴포넌트로 가져오기.
      • 추가하는 함수 만들기
        useState활용해서 상태배열에 추가해서 구현했지만, 이건 최적화된 코드가 아니다!
        ⇒ 새로운 상태가 이전 상태값을 바탕으로 한 것이라면, setPosts()에 애로우함수 넘겨줘야한다.
        ⇒ 왜??
        리액트 내부에서는 상태 업데이트 함수를 곧바로 실행하는게 아니다!
        업데이트가 서로 얽혀서 일어날때 이전 버전의 상태를 기반으로 잘못된 업데이트를 할 수 도 있다.

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

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

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