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

좋은 웹페이지 즐겨찾기