React에서 조건부 렌더링을 수행하고 토글 버튼을 만드는 방법?

반응형

useState hook을 사용하면 데이터를 표시하거나 숨길 수 있는 토글 버튼을 만들 수 있습니다.

반응에서 조건부로 렌더링하는 몇 가지 방법이 있습니다. 다음 중 하나를 사용할 수 있습니다.

논리적인 경우

로컬 호스트에 Apple이 쓰여 있는 것을 볼 수 있습니다. 그래서 어떻게 됐죠?

 

우선, 우리는 부울 변수 애플을 만들고 참 값을 할당했습니다. 우리는 이 변수에 접근할 수 있고 곱슬괄호 안에 조건부 논리를 넣을 수 있습니다.

<div>{apple && <h2>Apple</h2>}</div>

      ```

      여기에 변수가 있고 우리의 h2 태그는 오직 사과가 참일 때만 작동할 것이다. 만약 사과가 더 이상 참이 아니라면 h2 태그는 우리의 조건이 반전되기 때문에 작동하지 않을 것이다.

      사과의 가치를 거짓으로 바꿔보고 무슨 일이 일어나는지 보는 건 어떨까요?

      ## 조건 연산자가 있는 If-Else

      <div class="content-ad"></div>

      JavaScript 조건부 연산자 조건 true: JSX 내부에서도 falseworks.

      ```js

<div>{apple ? "Apple" : "Banana"}</div>;

만약 사과가 사실이라면, 그것은 애플을, 그렇지 않으면 바나나를 출력할 것이다.

반응에서 단추 전환

리액트에서는 로컬 상태를 관리하기 위해 기능성 부품 내부에 있는 후크를 사용해야 합니다. 이렇게 간단히 상태를 업데이트할 수는 없습니다.

 

const handleChange=()=>{
     return !changeText
     }

useState hook을 통해 상태를 업데이트하고 최상위 레벨로 가져와야 합니다.

let [changeText, setChangeText] = useState(true);

대괄호의 텍스트와 특정 값에 할당된 텍스트를 배열 소멸이라고 합니다.

const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

 

버튼에 onClick call back 함수를 추가할 수 있으므로 버튼을 클릭하면 handleChange 함수를 호출하여 changeText의 부울 값을 true에서 false로 변경할 수 있습니다.

이제 앱에서 재사용 가능한 토글 구성 요소를 확보했습니다.