useState의 초기값을 내가 받아온 props값으로 설정하기

필요성

Alarm이라는 컴포넌트를 만드는데, Alarm의 props 값을 받아서 Alarm 내의 state 초기값으로 설정하고 싶다.

이렇게 하면 될까?

// pushAlarmStatus : props
const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus);

const Alarm = ({ pushAlarmStatus }: Props) => {
	
    const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus);
    
	console.log(alarmName, 'status:', alarmStatus);
	console.log(alarmName, 'status:', pushAlarmStatus);
    
	return (
        <View>
            <Text>{alarmName}</Text>
            <AlarmSwitch color={styles.redColor.color} size={7.5} status={alarmStatus} />
        </View>
	);
};

 

에러

로그를 찍어보면 alarmStatus (state값)과 pushAlarmStatus (props값)이 다른 것을 확인할 수 있다.

하나는 true고 다른 것은 false이다

 

 

해결책 : useEffect

useEffect 훅을 활용해서 state의 값을 props 값으로 변경시켜준다. props 값을 관찰하다가 props 값이 바뀔때마다 useEffect() 훅이 다시 돌아간다.

const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus);

useEffect(() => {
    setAlarmStatus(pushAlarmStatus);
}, [pushAlarmStatus]);