javascript classList.toggle로 jquery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장
아래처럼더 보기 버튼을 누르면 위 영역이 확장되면서 내용을 더 보여주는 컴포넌트를 구현하려고 한다. 사실 jquery라면 일도 아니지만, javascript 특히 react에서는 귀찮다. 여러분이 느끼셨을 것 같지만, JavaScript, 특히 React를 사용하면서 DOM을 선택하는 작업이 매우 번거로울 때가 많습니다. 그리고 이것은 jQuery를 사용하시던 분들에게는 특히 더 그렇게 느껴질 수 있습니다. jQuery의 힘을 알고 있는 우리에게 이는 상당히 실망스러운 측면 중 하나일 것입니다. 그러나, 이렇게 불편함을 겪고 있는 것은 저희들만은 아닙니다. 사실, 이 문제를 해결하기 위한 방법은 많습니다. 여러 가지 가능한 방법들이 있지만, 주요한 두 가지 해결책은 ref 사용과 useState 사용입니다. ref를 사용하는 방법은 일반적으로 더 직관적이며, 직접적인 방법입니다. ref는 React에서 DOM 요소를 직접 다루기 위해 사용하는 기능입니다. 이를 통해 우리는 DOM 요소에 직접 접근하고 그것을 조작하는 데 필요한 정보를 얻을 수 있습니다. 이 방법은 jQuery에 익숙한 개발자들에게 특히 편리할 것입니다. useState를 사용하는 것은 좀 더 복잡한 해결책이지만, 이는 상태 관리의 측면에서 더 큰 유연성을 제공합니다. useState는 React의 Hooks 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 합니다. 이 방법은 DOM의 상태를 관리하는 데에 매우 효과적입니다. 그럼에도 불구하고, 이러한 방법들이 모두 완벽한 해결책은 아닙니다. 왜냐하면 코드가 길어질수록, 이러한 작업들은 더욱 번거로워지고 복잡해질 수 있기 때문입니다. jQuery의 강력함은 DOM을 쉽게 선택하게 해주는 데 있습니다. 이는 JavaScript와 React에서 복잡하게 느껴지는 부분이기도 합니다. 그래서 이 문제를 해결하는 방법이 필요합니다. JavaScript에서 DOM 선택을 더 스마트하게, 그리고 더 간결하게 만드는 방법이 필요합니다. 요약하면, JavaScript와 React를 사용하는 동안 DOM 선택과 조작에 대한 효율성과 단순성이 크게 필요합니다. 이는 jQuery의 힘이 바로 이 점에서 나타나며, 이에 대한 해결책이 절실하게 필요합니다. DOM을 더 쉽게 다루는 방법을 찾아 개발 과정을 더 효율적이고 즐겁게 만드는 것이 우리의 목표가 되어야 합니다. 그걸 좀 더 스마트하게 줄여주면 된다. // list Extender const ExtendClass = (e) => { e.target.parentElement.classList.toggle(“extend”); }; // render 처리 return ( … 더 읽기