
[공부] 노마드 코더 React hooks 3회차(useTitle, useClick)
2022. 1. 19. 23:27
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 querySelector를 사용해 html의 title을 가져와 title을 5초 후에 바뀌게 만들었다. const htmlTitle = document.querySelector("title"); 가져온 title을 htmlTitle이라는 변수에 넣고, 변수에 setTimeout을 활용해 내가 원하는 글자를 입력하면 제목을 바꿀 수 있다. useRef()를 활용해 클릭 이벤트 넣기 const element = useRef(); useRef()의 값을 받은 element는 바닐라JS에서 사용되는 querySelector나 getElementById 처럼 활용할 수있다. 활용하는 방법은 element.current로 쓰면 된다. element.current.addEventList..

[공부] 노마드 코더 React hooks 2회차(useTab)
2022. 1. 18. 23:13
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 버튼을 클릭하면 내용이 바뀐다. 버튼을 클릭하면 changeItem함수가 실행된다. 나는 changeItem을 setCurrentIndex함수로 정의했으므로 content.map함수로 인해 생성된 index값을 currentIndex에 넣는다. useState함수가 실행됨으로써 리 렌더링이 진행되어, return 해주는 currentItem의 값이 변경된다. allTabs [0] -> allTabs [1]으로 바뀐다. 그래서 태그에 currentItem의 content이 바뀌게 됨으로써, 결과적으로 화면에 내용이 바뀌게 나타난다. 배열 안에 객체로 데이터 받기 이용할 데이터는 다음과 같이 정의해 사용한다. const data = [{id:1, content:'i am supe..

[공부] 노마드 코더 React hooks 1회차(useInput)
2022. 1. 17. 22:48
공부/프론트엔드
Watch Now – 노마드 코더 Nomad Coders nomadcoders.co ❓ 상황 React를 이용해 트위터를 클론코딩하기 전에 hooks에 대해 사전학습이 필요하다는 얘기로 hooks를 공부하기 시작했다. ✨ 느낀점 👍 알게 된 점 특정 조건이 걸린 useInput만들기 const {value} = event.target;은 onChange될때 해당 이벤트가 발생한 태그의 value값을 받는겠다는 의미이다. 유효성 검사 함수를 통해 willUpdate의 값이 true냐 false로 바뀐다. willUpdate가 true일때는 setValue함수로 value값을 넘겨주어 input값이 입력이 되지만, willUpdate가 false가 되면 input에 value값을 넘겨주지 않게된다. 결과적으..