독일개발자초록이

React hooks 리액트 훅 useRef란? 오늘은 리액트의 중요한 훅 중 하나인 useRef를 배워보려 합니다. useRef라는 훅은 다른 useState 혹은 useEffect보다는 사용 빈도가 낮은 것 같습니다. 저 역시 리액트를 이용하면서 useRef를 사용해본 적이 정말 손에 꼽을 정도로 적은 것 같습니다. 하지만 당연히 알고 사용하는 것과 모르고 사용하지 못하는 것은 정말 다를 것입니다. 오늘은 가볍게 useRef에 관해서 알아보겠습니다. useRef 사용 방법. 마무리. 1. useRef 사용 방법. 아래의 코드를 설명해드리겠습니다. Click me 버튼을 누르면 isRef는 현재의 boolean값의 반대 값을 가지게 됩니다. 즉 기본 값이 false 이면 true, true 이면 fal..

useContext란? React hooks useContext란? 오랜만에 리액트 주제를 적어보네요. 이제 독일에도 봄이 진짜로 왔는가 봅니다. 산책을 나가보니 새소리와 벌레소리는 여기저기서 들리고, 꽃도 여기저기 많이 피었더군요. 자 그럼 보론으로 들어가 보겠습니다. 목차. useContext 란? 사용 방법? 어디에 사용하면 좋은가? 마치며. 1. useContext란? useContext란 무엇일까요?? useContext는 쉽게 말하면, 내게 필요한 props를 글로벌하게 사용할 수 있게 도와준다고 말할 수 있습니다. 우리는 리액트로 작업하면서 props를 정말 많이 사용하게 됩니다. 부모에서 자식 클래스로 바로 넘겨주는 props라면 크게 불편할 것 없이 인자를 넘겨주면 되겠지만, 부모에서 자..

React hooks 리액트 훅 React Router Dom란? 우리는 홈페이지에서 다른 홈페이지로 이동하려면, 즉 예를 들어 메인 페이지에서 About페이지로 이동하려면, 그에 맞는 HTML파일과 데이터들을 fetch 해야 했습니다. 하지만 리액트의 리액트 라우터 돔을 이용하면, 페이지의 이동이 아닌 각각의 페이지에 필요한 컴포넌트들을 불러와 보여주게 됩니다. 이는 좀 더 빠르고 다이내믹 해질 수 있어, 유저에게 조금 더 편안하고 만족스러운 경험을 줄 수 있습니다. 그럼 오늘도 여전히 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. React Router Dom란? React Router Dom 사용 방법. 마치며. 1. React Router Dom란? 앞서 말했듯이 리액트 라우터 돔을 이용하여, 페..

React hooks 리액트 훅 이벤트 처리란? 사용방법 오늘은 리액트 훅에서 이벤트 처리하는 방법을 알아보겠습니다 이러한 이벤트를 처리하는 함수들을 이용하여, 개발자는 유저로부터의 Input을 받아서 저장, 사용 가능하고, 유저는 이러한 기능을 통해 홈페이지와 상호작용 가능합니다. 오늘은 수많은 이벤트 처리 함수 중 대표적인 두 가지를 파헤쳐보려 합니다. 오늘도 역시 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. onClick 이벤트란? onChange 이벤트란? 마치며. 1. onClick 이벤트란? onClick 이벤트는 아마 가장 흔하며 자주 사용되는 이벤트이지 않을까 생각합니다. 이는 말 그대로 클릭 시 어떠한 이벤트를 발생시킨다는 뜻입니다. 예를 들면 로그인, 로그아웃 등등의 버튼이 있겠습니다..