React/React Hooks6 [Hooks] 6. useTitle / useClick 이제 useEffect를 사용한 첫 번째 hooks을 작성해보자. 문서의 제목을 업데이트 시켜주는걸 담당하는 hooks을 작성할거다. 제목을 업데이트할 수 있게 setTitle을 return 해줄거다. useEffect는 component가 mount 될 때 updateTitle을 부를거고, title이 업데이트되면 updateTitle을 다시 부를거다. 아직 updateTitle을 부르지 않았기 때문에 지금 바로 무슨 일이 생기진 않는다. titleUpdater를 어딘가에서 부르면 title이 바뀌게 된다. [title]이 바뀌면 updateTitle이 다시 불러지게 된다. 시간지연을 줘서 변화를 확인해보자. dependency는 매우 좋다. 하나의 value가 바뀌면 아래처럼 setTitle을 이용할.. 2020. 8. 22. [Hooks] 5. Introduction to useEffect useState의 첫 번째는 state를 초기화 시켜주고 두 번째는 첫 번째 아이템인 currentIndex는 index가 될거고, setCurrentIndex는 value를 바꿔줄거다. 다시 말하자면 useState의 value를 초기화해주고 현재 value와 value를 변경해주는 것. 이제 useEffect를 알아보자. componentWillUnmount와 componentDidMount, compoentWillUpdate와 비슷하다. component가 mount 되자마자 우리는 function을 실행시킬건데 component가 mount 되는 즉시 hello를 볼 수 있다. number와 aNumber를 클릭하면 componentDidUpdate의 역할도 하기 때문에 콘솔창에 sayhello가.. 2020. 8. 22. [Hooks] 4. useTabs API나 다른 어떤것으로부터 무언가를 가져오려고 한다. 그건 내 content가 될거다. section1, section2의 버튼을 만들어주자. 선택한 section의 content만 보여주고 싶다면? 그 다음에는 useState가 항상 initalTab을 갖게할거다. 내가 현재 선택한 탭의 content의 인덱스를 얻고 싶다면? useTab(0)일 때 즉, 배열의 인덱스가 0 일 떄, 첫 번째 요소를 가져온다는 것. currentItem은 allTabs(currentIndex)가 될거다. function이 시작될 때 에러를 확인하려고 한다. Array.isArray() 메서드는 해당 인자가 Array인지 알려준다. allTabs가 true가 아니거나 배열이 아니라면 리턴되고 끝날거다. 여기 tab이 없.. 2020. 8. 21. [Hooks] 3. useInput 앞으로 만들게 될 hooks들의 다른점을 살펴보는 건 꽤 가치 있는 일이 될거다. 처음으로 다뤄볼 hooks는 useInput이다. useInput은 기본적으로 input을 업데이트 한다. 우선 초깃값을 받을거다. Mr.를 내 이름의 기본값으로 설정하자. 우리는 어떤 변화를 주기 전에, 이 기본값(Mr.)을 value와 함께 return하고 싶다. useInput은 value를 return 할거고 이제 name은 value랑 같아지고, 그런 다음 value는 name.value를 갖게 된다. Mr. 라는 값을 initialValue로 받아서 useState의 initalValue로 전달돼서 value로 잘 갈거다. onChange 함수를 만들어보자. 값을 입력하면 console.log에 아래와 같이 출력.. 2020. 8. 18. 이전 1 2 다음
