[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개를 사용하면서 감을 익혔다. 😆👏👏👏 그래도 이제부터는 자제해서 명확한 코드를 짜도록 해보자.