[Javascript/React] Class구조에서 재사용 가능한 toggle 함수 만들기

const [open, setOpen] = useState(false);

React hook구조는 useState를 제공한다. 

 

this.state = { open : flase }; //위의 open 변수
this.setState = { { open : true } }; //위의 setOpen 변수

위 처럼 선언을 하게되면 Class구조에서 open이라는 변수의 state를 선언하고 setState함수를 좀 더 편리하게 사용할 수 있게 해준다.

 

 

 

 

Hook에서 toggle을 구현하는 방법

그래서 hook을 이용하면 toggle함수를 선언하기가 편했다. 나는 아래처럼 사용해서 toogle을 구현했다.

function useToggle() {
    const [open, setOpen] = useState(false);
    const toggleOpen = useCallback(() => {setOpenDetail(open => !open)});

    return [toggleOpen];
}

이렇게 하면 state가 추가 될때마다 위 function에 각 state와 toggle 부분을 추가해서 재사용할 수 있었다.

 

 

 

 

그런데 class구조를 사용하려고 하니까 위 방법으로 할 수가 없었다. 흠 .. 고민고민하다가 예전에 꺽쇠를 이용하면 string을 번수처럼 사용할 수 있다는 사실이 떠올렸다.

const stateName = "open";
console.log([stateName]);

이렇게 선언하면 아래 출력할때 react는 "open"이라는 string으로 인식한다.

 

요 방법을 사용하면 재사용 가능한 function을 만들 수 있을 것 같은 느낌 ..!

 

 

 

 

Class에서 재사용 가능한 toggle 구현하기

toggle(stateTitle){
    this.setState({
        [stateTitle] : !this.state[stateTitle]
    });
}

[stateTitle]이 string으로 들어온 state이름을 react가 변수로 인식할 수 있게 해준다.

그리고 string을 이용해서 state를 가져오고 싶으면 this.state[stateTitle] 형태로 사용하면 된다.

 

<Button onClick={() => this.toggle("open")}> 열기 / 닫기 </Button>

이처럼 하면 toggle("변경을 원하는 state이름")을 이용해서 toggle함수를 사용할 수 있다.

 

이로써 재사용성이 높은 toggle 함수를 만들어냈다. 휴. 일일히 만들던 과거의 나 안녕!! 🖐