0316

호두·2022년 3월 16일
0

공부

목록 보기
2/25

공부내용 한줄 요약
두 개의 State와 삼항연산자 사용해 disabled "flip" 기능 추가

State의 초기값을 false로 두고, 두 개의 컴포넌트에게 disabled 속성을 주되 각각 값이 false면 활성화 / true면 활성화 되게 한다.
disabled={flipped} 또는 disabled={flipped === false} / disabled={!flipped} 또는 disabled={flipped === true}

("flip"버튼에 onClick 이벤트 리스너를 통해 실행되게 해놓은) State의 함수는 function((current) => !current), 즉 current를 사용하지 직접 true/false 적지 않아 오류를 방지한다.

삼항연산자 Boolean(?) ? (참일 때의 변수) : (거짓일 때의 변수)

Comment
VanillaJs와 달리 ReactJs는 {} 안에 갑자기 조건문을 적는 것이 익숙하지 않다. 이에 더해 삼항연산자의 활용법이 명확하지 않다.

State값을 boolean으로 쓰면 야간모드 개발에 사용하기 좋아보인다.

profile
web developer

0개의 댓글