리액트 / &&, switch, 꿀팁

▷ &&연산자로 코드 줄이기 

 

1 === 1 ? <div>참</div> : null

                ||

1 === 1 && <div>참</div> 

 

왼쪽 조건식이 true면 오른쪽 jsx가 그 자리에 남는다 

 

▷ switch문으로 if문 대신하기

 

function reducer(state, 액션){
  if (액션.type === '수량증가'){
    return 수량증가된state
  } else if (액션.type === '수량감소'){
    return 수량감소된state
  } else {
    return state )}

 

function reducer(state, 액션){
   switch (액션.type) {
    case '수량증가' :
      return 수량증가된state;
    case '수량감소' : 
      return 수량감소된state;
    default : 
      return state  }}

 

▷ 오브젝트 자료형을 응용한 enum

 

내가 state가 info면 1을 보여주고 shipping이면 2를 보여주고

이렇게하고싶은데 이걸 if문으로 state를 검사하는 문법 말고 

오브젝트 자료형에 내가 보여주고싶은 1,2를 담고 

오브젝트 뒤에 []붙여서 key값이~인 자료를 뽑겠다고 정의하면 

이 key값 변수에 따라 원하는 html을 보여주는거 

 

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품정보</p>,
           shipping : <p>배송관련</p>,
           refund : <p>환불약관</p>
        }[현재상태]
      }
    </div>)}        // info가 key인 상품정보가 보여질것 

 

여기서 추가하자면 저 오브젝트들을 state나 변수에 따로 담아서 

좀더 깔끔하게 구현  

 

var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      { 탭UI[현재상태] }
    </div>)} 

 

 

▷ sync / async 상식 

 

한줄씩 실행되는게 sync 

순차적으로 안하고 완료되면 실행하는게 async 

(ajax, 이벤트리스너, setTimeout 이런 함수쓸때 일어나는 현상)

 

강의내용중에 이게 있는 이유는 

state 변경함수는 async 하게 처리되는 함수기 때문에 

예상치 못한 문제가 생길수 있어서 이럴때  useEffect로 해결하는 방법이

있다고 소개하는거였는데 2022년 이후 18.0버전은 batching업데이트가 나와서 이거 몰라도 된다고함