[React] input을 포함하는 여러 행이 존재하는 테이블에서 상태 관리하기

Mandy·2024년 1월 2일

React modal typescript useState

개발을 하다보면 한 번 이상은 반드시 마주치게 되는 케이스가 있다.

그 중 대표적인 것이 반복문으로 생성한 컴포넌트의 상태를 관리하는 경우이다.

예를들어, 아래와 같은 ui를 생각해보자.

데이터에 대한 정보를 가진 컴포넌트가 리스트 형태로 보여지고 있다.

단순하게 생각해서 ['김철수', '이영희', '박민수', '최순희', '홍길동'] 이라는 배열 값을 반복문을 이용해 컴포넌트를 생성하고 렌더링한 것이라 가정해보자.

이 때 사용자가 집에 있기 버튼을 클릭하면 해당 컴포넌트만 집에 있기 상태가 되어야 하고 버튼이 클릭되지 않은 나머지 컴포넌트들은 집에 있기 상태가 아닌것이다.

그렇기 때문에 집에 있기 버튼에 onChange 이벤트가 state를 업데이트 하는 동작을 해줘야 할 것이다.

const [isStayHome, setIsStayHome] = useState(false)

하지만 위의 코드처럼 상태 값을 단 한개의 boolean으로 관리하게 되면 모든 반복 생성된 컴포넌트가 단 하나의 상태값을 공유하게 되므로 김철수 의 집에 있기 버튼을 클릭하더라도 나머지 4개의 컴포넌트들도 집에 있기 버튼을 클릭한 것 처럼 상태가 변경될 것이다.

그렇기 때문에 이러한 경우에는 각각의 상태를 개별적으로 관리해야 한다는 생각을 할 수 있다!

하지만,

const [isStayHome철수, setIsStayHome철수] = useState(false)
const [isStayHome영희, setIsStayHome영희] = useState(false)
const [isStayHome민수, setIsStayHome민수] = useState(false)
const [isStayHome순희, setIsStayHome순희] = useState(false)
const [isStayHome길동, setIsStayHome길동] = useState(false)

위 코드처럼 모든 상태값을 전부 선언해서 사용할 수는 없다. 왜냐하면, 지금은 예시를 들기 위해 5개의 데이터만 준비했지만 실제로 수많은 데이터들을 받아야 하는 상황이라면 아마 수백줄은 useState를 선언하는 데 써야 할 것이다. 😅

그렇다면, 더 좋은 방법이 없을까?🤔

state를 배열로 선언하고 사용하기

여러개로 선언하는게 번거롭다면, 한 개의 state를 배열로 선언하고 관리해보자!

이제 각각의 컴포넌트는 자신의 인덱스 순서에서 state를 업데이트할 수 있게 되었다. 이게 무슨 소리냐면,

const [isStayHome, setIsStayHome] = useState<boolean>(Array(5).fill(false)); // [false,false,false,false,false]
const dataArray = ['김철수', '이영희', '박민수', '최순희', '홍길동'];

return (
  <ul>
  {dataArray.map((data: string, index: number)=>{
			<li key={data}>
   				<p>{data}</p>           
            	<button onChange={()=>{
                	setIsStayHome((prev)=>{
							const updatedState = [...prev];
                      		updatedState[index] = !updatedState[index];
                      		return updatedState;
						})
                }}>
                  {isStayHome[index] ? '집콕중' : '집에 있기'}
                 </button> 
  			</li>
		}
	}
   </ul>	
)

스타일은 생략하고 간략하게 컴포넌트 구조와 이벤트, state를 위주로 코드를 작성해보면 위와 같을 것이다.

우선, state를 선언할 때 기존처럼 한 개의 boolean 값을 여러 개 선언하는 게 아니라 boolean 값이 5개 들어있는 배열로 초기화 및 선언을 해준다.

만약 이영희 값이 있는 컴포넌트에서 집에 있기 버튼을 클릭하려 한다면 updatedState에 이전 state 값이 복사되고,

updatedState의 index 번째 값은 기존에 들어있던 값의 not(boolean이므로 반대 값)인 값이 들어간다.

그리고 updatedState를 리턴함으로써 해당 값으로 isStayHome 상태 업데이트가 되도록 한다.

그러면 상태 값의 변화 때문에 이영희 의 옆에 있는 버튼은 집콕중 으로 변화하고 나머지 컴포넌트의 버튼은 그대로일 것이다.

여기까지가 useState를 배열로 선언함으로써 여러 개의 컴포넌트를 각각 개별적으로 state 관리할 수 있게 만든 가장 기초적인 방법이다.

심화예제

그렇다면, 고작 5개가 아니라 수백 수천 개의 데이터를 반복해서 컴포넌트로 렌더링하는 경우를 생각해보자.

또한, 앞선 예제와 다르게 이번에는 각 컴포넌트에 input 태그를 포함해서 클릭한 행에 대해서만 해당 input이 disabled=false이고 다른 모든 행은 disabled=true가 된다고 가정하자.

이 상황도 사실 앞선 예제와 근본적으로는 다르지 않다. disabled는 boolean 값으로 컨트롤 할 수 있기 때문이다.

지금 예제에서는 행 개수가 대략 2천 개정도 된다고 하자.

const [isFocusing, setIsFocusing] = useState<boolean>(Array(2000).fill(false));
const dataArray = ['김철수', '이영희', '박민수', '최순희', '홍길동', ...]; // length가 2000인 배열로 선언한다.

return (
  <ul>
  {dataArray.map((data: string, index: number)=>{
			<li key={data}>
   				<p>{data}</p>           
            	<button onChange={()=>{
                	setIsFocusing((prev)=>{
							const updatedState = [...prev];
                      		updatedState[index] = !updatedState[index];
                      		return updatedState;
						})
                }}>
                  <input type="text" disabled={isFocusing[index]} />
                 </button> 
  			</li>
		}
	}
   </ul>	
)