오늘 고민한 코드

팀플레이를 하느라 내가 가진 코드는 많지 않지만 그래도 하나 건진 코드가 있어서 남겨본다.

1. 삼항연산자 jsx에 적용하기

  const checkCookie = {
    'nickname' : getCookie('nickname')
  }
  ...
  ...
{checkCookie.nickname === posts.nickname ?(<STDetailButton2 onClick={()=> onDeleteButton(post.commentid)} >삭제하기</STDetailButton2>) : ""}

중복된 3항 연산자가 될 경우 중복시키지 말고 특정 부위에만 적용시키는 방법도 고려해봐야한다.

2. 조건부 렌더링

두 번째로 마주친 문제. 와칭해주다가 지켜보는게 변경되면 리렌더링해주는 useeffect의 힘을 잘 이용해야한다.

// 2. 와칭해주는게 지켜보다가 변경이 되면 리렌더링(삭제도 됨)
    useEffect(() => {
      dispatch(__getPost());
        }, [ posts.length]);

  return (

    <>  
    <Header/>
    {
      posts.length > 0 &&
      // 1. posts가 배열이므로 빈배열이 먼저 나올 경우 제외하고 조건부 렌더링 해준다.
        (
          <>
            {
              posts.map((post, index) => {
                return (
                  <div key={index}  onClick={() => {navigate(`/PostDetail/${post.id}`);}}>
                    <ListContainer>
                        <div>
                          <ListContent>
                            {post.nickname}<br/>
                            <img src={post.img}
                            style={{ width: "400px", height: "400px"}}
                            /><br/>
                            <button>좋아요</button><br/>
                            내용 : {post.content}<br/>
                          </ListContent>
                        </div>
                    </ListContainer>
                  </div>
                )
              })
            }
          </>
        )
    }
    </>
  )
  }

map을 이용한 undefined 에러가 또 나왔지만 이번에는 잘 조치한 것 같다. 챌린지 한 부분이 거의 백엔드와의 협업에서 나오는 500에러 등이었기 때문인거 같기도 하다.

내일 할 일

• 마이페이지에 내가 쓴 글 정렬
• 게시글 좋아요