if문 대신 사용할 수 있는 논리 연산자 (&&, ||)

KOR ▼ 버튼을 만들었고

자식으로 ENG

                JPN

                CHN 버튼을 만들었다.

<KORBtn onClick={(e) => ShowLocalMenu(e)}>

            &nbsp;KOR&nbsp;▼

            {localMenu && (

              <KORBtnSubUl isVisible={localMenu}>

                <KORBtnSubLi>

                  <ApplyInLinkTag to="https://www.ticketlink.co.kr/global/en">

                    ENG

                  </ApplyInLinkTag>

                </KORBtnSubLi>

                <KORBtnSubLi>

                  <ApplyInLinkTag to="https://www.ticketlink.co.kr/global/ja">

                    JPN

                  </ApplyInLinkTag>

                </KORBtnSubLi>

                <KORBtnSubLi>

                  <ApplyInLinkTag to="https://www.ticketlink.co.kr/global/zh">

                    CHN

                  </ApplyInLinkTag>

                </KORBtnSubLi>

              </KORBtnSubUl>

            )}

          </KORBtn>

 

내가 원하는 작업은

평소에는ENG

               JPN

               CHN 버튼이 보이지 않았다가

(display:none; 이었다가)

KOR ▼ 버튼을 클릭했을 때

                 ENG

                 JPN

                CHN 버튼이 보이는 것이다.

(display:block; 이 되는 것이다.)

 

처음에는 함수를 만들어서

getElementById나 ~ByClassName으로

하려고 했는데 하다보니 막혔다..

튜터님을 찾아가서 여쭤보니까

리액트에서는 getElement를

사용할 수 없다고 하시면서

&& 연산자를 알려주셨다.

 

이게 무슨 말이지..?? 하면서 찾아봤다.

나는 여태 &&는 둘 다 true일 때,

||는 둘 중 하나가 true일 때 true를 반환하는 것만

알고 있었는데 다르게 사용되는 경우도 있던 것이다.

 

그러니까, if - else문 대신으로도 사용할 수도 있는거다!

 

&& 연산자: true일 경우 → 다음 로직 실행

|| 연산자: false일 경우 → 다음 로직 실행

 

 

일단, 답은

const LocalMenuItem = () => {

  const [localMenu, setLocalMenu] = useState(false);

  const ShowLocalMenu = () => {

    setLocalMenu(!localMenu);

  };

<KORBtn onClick={(e) => ShowLocalMenu(e)}>

            &nbsp;KOR&nbsp;▼

            {localMenu && (

              <KORBtnSubUl isVisible={localMenu}>

                <KORBtnSubLi>

                  <ApplyInLinkTag to="https://www.ticketlink.co.kr/global/en">

                    ENG

                  </ApplyInLinkTag>

                </KORBtnSubLi>

                <KORBtnSubLi>

                  <ApplyInLinkTag to="https://www.ticketlink.co.kr/global/ja">

                    JPN

                  </ApplyInLinkTag>

                </KORBtnSubLi>

                <KORBtnSubLi>

                  <ApplyInLinkTag to="https://www.ticketlink.co.kr/global/zh">

                    CHN

                  </ApplyInLinkTag>

                </KORBtnSubLi>

이거였다.

 

설명을 좀 하자면,

리액트에서는 상태관리를

state로 해줘야 하기 때문에 useState를 사용했고

 

상태 변경 함수가

false = 버튼이 클릭되지 않았을 경우

true = 클릭 된 경우

 

즉, 실행되는 순서는

1. KORBtn을 onClick한다.

2. ShowLocalMenu( )함수가 호출된다.

3. onClick이 되지않아 false값을 가지고 있는

localMenu가 setLocalMenu라는 상태변경함수에 의해

localMenu가 true값으로 변경된다

( KOR ▼ 버튼 = localMenu이다.

KOR ▼ 버튼을 클릭하지 않으면 false고

KOR ▼ 버튼을 클릭하면 true이다.)

4. localMenu가 true일 경우, 계속 실행한다.