useState

• 대표적인 Hooks이다.

이벤트 핸들러에도 유용하게 사용할수 있는 hook이라고 할수가 있으며 가장 많이 사용되는 기본적인 Hook이다.

• 기본적인 사용법이다.

해당하는 버튼이 눌렷을떄에
이벤트 핸들러 함수가 발동을 하게 되고
함수에서는 Hook의 값을 바꾸는 작업을 하게 된다.
어렵지 않으니 바로 넘어가겠다

useInput

• 가장 기본이 되는 useState를 활용하여 사용하였다.

위에 있는 사진부터 설명을 하자면
useState의 초기값을 입력받아서 사용을 하며 이벤트 핸들러가 발생을 하였을떄 로그를 찍게 하는 역할을 한다.

이떄 return값을 주게되면 변수 name에는 배열의 형태로 useState와 핸들러가 들어가게 된다.

이후익숙하지는 않지만 자주 사용되는 ...으로 값을 나열하게 되면

input 태그 안에 자동으로 value와 change가 설정이 완료 된다.

• 이부분이 좀 아이러니 하지만 js는 이렇게 사세한 설정은 무시하는 언어이기 떄문에 그런갑다 하고 넘어갔다.

아래 사진은 위에있는 로직에 validation을 추가해준 것이다.
일단 변수를 두개를 받고 두번쨰 변수

• 첫번쨰 변수는 위에 설명한 것과 같은 역할을 한다.

가 함수인지 아닌지를 파악한다.
만약 함수라면 들어오면 변수를 함수로 인식하고 해당 함수를 통해서 검증을 한다.

• 이 로직에서는 maxLen이라는 함수를 넣었고 이 함수를 통해서 @라는 문자가 포함되면 false를 return하게 해주었다.

이렇게 검증이 되면 다시 useInput에 돌아와 아래있는 if문을 실행시킨다.

• 만약 @가 있다면 false가 되기 때문에 if문이 작동하지 않는다.

이렇게 로직이 진행된다.
이 부분에서 좀 많이 혼동이 왔었는데 차근차근 코드를 뜯어보면 많이 어렵지 않다.

처음 봤을떄 많이 어렵다고 느낀 이유는 로직 순서가 왔다갔다 하기 떄문이라고 생각한다.

useTabs

• 로직 구현은 해당 버튼을 눌렀을떄 버튼에 있는 index을 이용해서 index에 어울리는 content내용이 화면에 보이는 것이다.

처음으로 봐야 하는 것은 useTabs함수이다.
두개의 인자를 받고 if문을 통해서 검증을 끝낸뒤
useState를 사용한다
이떄 return을 두가지 하는데 이것은 앞서 사용했던useInput와 동일하다.

그후 이 retrun을 받는 변수를 선언해 준다.
마찬가지로 사용을 하면 되는데 버튼을 누르게 되면 핸들러가 작동을 하고
핸들러에서는 set을 통해서 index를 수정하게 된다.

• 이떄 수정되는 index는 버튼에 담겨있는 index와 동일하다는 것이 이 로직의 핵심이다.

이후 간단하게 화면에 보이게 해주면 된다.

input부분을 이해하면 이 부분도 쉽게 이해가 될것이다.

useEffect

• useState와 동등하게 중요하다고 생각하는 부분이다.

기본적인 작동법은 생각보다 어렵지 않다.
,뒤에 선언하는 조건에 따라서 ,앞에 있는 로직을 작동하라는 것이다.

- 1번 사진

number에 변함이 있을떄마다 해당 함수를 실행 하라는 의미이다.

- 2번 사진

시스템이 시작할떄만 단 한번 실행하라는 의미이다.

- 3번 사진

빈 배열로 선언하게 되면 모든 상황일떄 안에 있는 로직이 작동하게 만든다.

예를 들면 시스템이 시작할떄, number가 바뀔떄 등등 그냥 변함이 있을때마다 작동을 하게 해준다.

매우 간단하지만 굉장히 유용하게 사용되는 Hook이다.

스터디 하는 현직 개발자 분도 이 훅에 대해서 많이 언급하셨고 굉장히 유용하고 재미있다고 말해주셨다.

useTitle

• html의 파일을 수정할수 있는 로직이다.

앞서 적었던 로직을 이해한다면 어렵지 않은 로직이다.

일단 변수에 useTitle을 선언받고 들어오는 값을 이용해 title의 값을 초기화 해준다.

그후 setTimeout라는 내장 함수를 이용해 변수에 값을 수정해 준다 시간을 부여해준다.

• 변수에 값을 수정하는 이유는 알고 있듯이 return이 set이기 떄문이고 이렇게 값을 수정하면 title의 값이 수정 되게 된다.

만약 값이 수정이 되게 되면은 useEffect에서 인식을 하게 되고 적혀있는 로직을 실행한다.

반복해서 말하지만 앞에 있는 로직이 익숙하다면 정말 많이 어렵지 않은 로직이다.

useRef

• queryselector 처럼 특정 컴포넌트를 찾아 오는 hook이다.

이런 식으로 사용할수 있으며 이제 potato는 input과 동일하다고 볼수 있고 input에 자유롭게 접근을 할수가 있다.

• useRef를 활용한 코드이다.

useRef를 통해서 해당 하는 값을 받아오고 값이 존재 한다면 이벤트를 추가 해주는 로직이다.

많이 쉬우니 부가 설명은 하지 않고 다음에 다룰 내용을 더 자세하게 살펴 보겠다.

componentMount

componenetMount라는 useEffect의 한가지 특성이다.

• 솔직하게 나도 아직 잘 이해는 하지 못했고 적으면서 이해가 되면 한번 적어보도록 하겠다.

일단 useRef를 통해서 가져온뒤 이벤트를 추가하는 것 까지는 이해가 될것이다.

이떄 return을 통해서 이벤트를 삭제해 줘야 한다.

일단 기본적으로 useEffect의 조건이 [] 이기 떄문에 처음 로직이 실행될떄 실행 된다는 것은 이해를 할 것이다.

이후 return을 통해서 이벤트를 삭제 하게 되는데 이 과정이 없다면 해당 element에 계속해서 이벤트가 추가 되게 된다.
이 삭제 될떄의 리액트 상태를 componentWillUnmount라고 한다.

• 나도 잘 모르겠지만... 그렇다고 한다.

이부분은 리액트의 생명주기와 관련이 되어 있는데 아직 내가 자세하게까지는 공부를 해보지 않아서 잘 모르겠다.

• 최종적인 로직이다.

아고라 스테이츠 라는 코드스테이츠질문 코너를 통해서 알게 되었다.

일단 useEffect에 조건을 []주었기 떄문에 코드가 작동을 하게 된다.
하지만 if 문을 통해서 element에 조건을 주었기 때문에 바로 발동을 하는 것이 아니고 눌렀을떄 작동을 하고

항상 rerurn이 필요한 것은 아니다.
-return이 필요한 경우는 이와 같이 이벤트를 추가해주는 로직을 사용한 경우에만 사용한다.

이유는 계속해서 이벤트 리스너가 추가 되기 떄문에 리소스 낭비가 발생하기 떄문이다.

• 이경우를 componentWillUnmount라고 한다.

useConfirm

브라우저를 통해서 해당 값의 실행 유무를 검증하는 방법이다.

• 전체적으로 볼수 있는 방법이 이 방법밖에 없어서 이런 사진을 올렸다.

방법은 이떄까지 했던 방법과 크게 다르지 않지만 다른점은

• 브라우저를 통해서 값을 검증한다.

이처럼 버튼을 누르게 되면 브라우저가 검증을 시작하고 확인을 눌러서 true값을 주게 되면 콘솔이 찍히게 된다.

• 취소 버튼을 누르면 false값이 맵핑 되어서 로그가 찍히지 않는다.

후기, 느낀점

사실 이 외에도 다양한 훅의 활용법이 만다.(6~7정도??)

그 이후의 내용을 적지 않는 이유는 어차피 모든 코드가 useEffect, useState, useRef를 사용하기 떄문이다.

그러기 떄문에 추가적인 예시를 보는것은 의미가 없다고 생각하여 이정도 까지만 진행했다.

엄청 짧고 빠르게 진행을 해서 배운것이 없다고 생각할수도 있지만 나는 생각보다 개념 정리가 잘 되었다고 느끼고 굉장히 유용한 시간이였다고 생각한다.

이제 저번에 하다가 이해가 안가서 포기했던 Nwitter을 진행 하고자 한다.

수고링!!