[REACT] 리액트에서 state prev 란 무엇일까, 아주 쉽게 설명하기 (한번 더 클릭해서 상태 변경하기)

 

 

 

 

 

 

 

안녕하세요 디자코 입니다.

 

오늘은 리액트에서 'state prev' 가 뜻하는 바를

아주 짧고, 쉽게 이야기 해보겠습니다.

 

 

리액트로 Todo List를 만들던중 마주친 문제 입니다.

아래는 List 컴포넌트 코드의 일부 입니다.

const lis = props.topics.map((t) => (
    <li key={t.id}>
      <input type="checkbox" />
      <a href="/" onClick={(event) => {
        event.preventDefault();
        setIsClickedRead(t.id)
      }}>{t.todo}</a>
      <input type="checkbox" value="⭐️" />
      <input type="button" value="modify(Update)" onClick={() => setIsClickedUpdate(t.id)}/>
      <input type="button" value="Delete" onClick={()=> handleDelete(t.id)}/>
      {isClickedRead === t.id && (
        <p><input type="text" value={t.detail} /></p>
      )}
      {isClickedUpdate === t.id && (
        <Update todo={t.todo} detail={t.detail} 
          onUpdate={(todo, detail) => handleUpdate(t.id, todo, detail)}
        ></Update>
      )}
    </li>
  ));
  return <ul>{lis}</ul>;

 

Update 내용이 저장이 안되고 여러가지 문제가 아직 많습니다만

어쨌든 '할일1', '할일2' 등이 출력되는 a태그를 한번 더 클릭시 {t.detail} 내용이 출력되게 되는데

한번 더 눌렀을 경우 사라지는걸 구현하고 싶었습니다.

 

// useState 내용
const [isClickedRead, setIsClickedRead] = useState(null);
const [isClickedUpdate, setIsClickedUpdate] = useState(null);

// const lis 내용
{isClickedRead === t.id && (
	<p><input type="text" value={t.detail} /></p>
)}

isClickedRead 값이 t.id 와 일치할 경우 {t.detail} 값이 출력되는 것이니

'prev' 와 'setIsClickedRead' 를 사용해서 상태값을 변경 시켜 제가 원하는대로 만들어 보겠습니다.

 

 

//수정 전
<a href="/" onClick={(event) => {
        event.preventDefault();
        setIsClickedRead(t.id)
      }}>{t.todo}</a>

// 수정 후
<a href="/" onClick={(event) => {
        event.preventDefault();
        setIsClickedRead(prev => prev === t.id ? null : t.id) // 수정
      }}>{t.todo}</a>

'prev'는 'setIsClickedRead'의 이전 상태값을 의미합니다.

즉, 'setIsClickedRead'를 호출하기 이전 'isClickedRead'의 값이 'prev'에 들어갑니다.

 

'setIsClickedRead'는 '클릭된 todo의 id 값을 저장하는 상태값'을 변경하는 함수 입니다.

'prev === t.id ? null : t.id'는 현재 클릭된 todo의 id가 이미 'isClickedRead' 상태값에 저장되어 있는 경우,

해당 id를 'null'로 바꿔 클릭된 상태를 해제하고,

그렇지 않은 경우 현재 클릭된 todo의 id를 'isClickedRead' 상태값에 저장하여 클릭된 상태를 유지합니다.

 

아직 고쳐야 될 것이 천지지만 나타나고 사라지는 부분은 이제 잘 작동합니다.

 

 

setIsClickedRead(prev => prev === t.id ? null : t.id)

어쨌든 이 코드는 클릭된 todo의 id가 이미 'isClickedRead' 상태값에 저장되어 있는 경우

그 값을 'null'로 바꿔 클릭된 상태를 해제하고,

그러지 않은 경우 현재 클릭된 todo의 id를 'isClickedRead' 상태값에 저장하여 클릭된 상태를 유지합니다.

 

이전 클릭된 todo의 id를 기억하지 않고 현재 클릭된 todo의 id값만 저장하도록 하기 위해 위와 같은 함수를 사용합니다.

 

 

Todo List 쉽게 봤다가 아주 만신창이로 두들겨맞고 있는중 입니다.

더 두들겨 맞고 오겠습니다.