[TIL : 16] React State & Props
오늘 배운 것
- 버튼을 누르면 사라지게 하고 싶어! (삼항연산자, 불리언으로 풀기)
removeTweet(!showTweet)
이렇게 쓰면, 플래그처럼 사용할 수 있다. true일 때, false로 false일 때, true로 바꿈!const Content = ({content}) => { const [showcontent, removecontent] = useState(true); const HandleRemoveContent = (event) => { removeTweet(!showTweet); // 플래그처럼 true->false, false->true return ( <div> {showcontent ? <div> <button className="~~~" onClick={HandleRemoveContent}> // 버튼 누름! <i className="far fa-trash-alt"></i> </button> </div> : null}; //true면 버튼이 보이고 false면 null이다. </div> };
이러면 버튼을 눌렀을 때,
HandleRemoveContent
함수가 동작하고,showTweet
의 상태가 false로 바뀌게 된다. 상태가 바뀌면서 다시 처음부터 렌더링이 되고, false이므로 null이 보이게 된다.(안 보이게 된다.)
혹은className
에.hide
를 추가하고, CSS에서.hide { display: none; }
를 추가하여 보여주지 않게 하는 방법도 있다. - 동기와 비동기 : 하나의 이벤트핸들러에
state
를 두 개 넣으면, 그 값이 같이 바뀌어야 하는 거라면, 함수는 동시에 렌더링되기 때문에 나중에 바뀌는state
는 바뀌지 않는다! 그래서 사용자의 액션이 하나씩 밀린다. 그래서 많은state
를 쓰지 않는 게 좋은 것 같다. 따로 다른 함수를 호출해서 빼내는 것으로 수습(?)하긴 했지만 애초에 간결하게 쓰도록 하자.🤓예를 들어 어떤 이벤트 동작으로 작동하는 함수가 있다.
const [choice, setchoice] = useState('초깃값'); const [fromChoice, setFromChoice] = useState('초깃값'); const HandleChoice = (event) => { setChoice(event.target.value); // 여기서 choice를 바꿔주었지만, console.log(choice) // 같은 함수 안에서는 '초깃값'이 나온다. if (choice !== '') { // 따라서 이 코드는 한 동작 늦게 실행된다. setFromChoice('바꿀값') } else { setFromChoice('바꿀값') } };
위의 주석과 같이, 같은 함수 안에
state
를 두 개 넣으면, 앞선state
가 바로 바뀌지 않으므로 다음state
가 바뀔 수 없다. map
으로select
option
주기!return ( <div className="selectUser"> <div> <select onChange={Handleusername}> {usernames.map((username) => { return (<option value={username} key={username.toString()}>{username} </option> ) })} </select> </div> </div> );
여기서
Handleusername
으로 사용자가 클릭했을 때, 바뀐 값을 사용할 수 있도록한다. 이때, 꼭꼭 사용할 수 있도록 옵션 태그에value
를 걸어주어야 한다! 그래야 사용자가 뭘 선택했는지,Handleusername
에서event.target.value
으로 알 수 있다.- 어제까지만 해도 뭐야! 이게 뭐야! 뭐라는거지..? 알다가도 모를 녀석들이었는데 오늘 8~10개를 사용하면서 감을 익혔다. 😆👏👏👏 그래도 이제부터는 자제해서 명확한 코드를 짜도록 해보자.
Author And Source
이 문제에 관하여([TIL : 16] React State & Props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pearpearb/TIL-16-React-State-Props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)