Hook?
Hook이란 클래스 컴포넌트에만 사용할수 있었던 상태관리기능과 라이프사이클 관리기능을
함수컴포넌트에서 사용하기위해 만들어진 기능이다.
Hook의 이름은 반드시 use로 시작하는게 컨벤션이다.
보통 쓰이는 Hook으로 내장Hook이 존재하고 사용자의 취향에 따라 만들수있는 커스텀Hook도 존재한다.
사용규칙을 알아보자면
Hook은 함수컴포넌트의 최상위에서 호출해야만 하며
함수컴포넌트, 또는 커스텀Hook 안에서만 호출할수있다.
프롭...스?
컴포넌트의 속성값. 즉 부모컴포넌트로부터 전달받은 데이터를 지니고 있는 객체라고 한다.
전달하고자하는 어떤값이든 자식컴포넌트에게 전달이 가능하고 그값은 문자 숫자 변수 함수등
무엇이든 될수있다.
Props란 마치 변수 선언과 닮아있다.
함수의 상단에서 선언된 변수의 값이 자식 컴포넌트에게도 필요하다면
우리는 자식컴포넌트의 안쪽에 마치 변수를 또하나 선언하듯 이름을 지어
새로만든변수명 : Props로보낼변수명
으로 프롭스를 보낼수있고 자식컴포넌트에선 함수컴포넌의의 인자로 Props를 받아올수있다
이때 인자로 props라는 이름을 쓰게되는데 컨벤션이라 하니 나중에 코드헛갈릴 일이 없도록 따라쓰도록하자.
만일 Props로 넘겨주고 싶은 정보가 단일이 아니라 다수라면 어쩌지?
보내고자 하는 Props를 쓴후 띄어쓰기로 구분하며 몇개를 보내든 상관이없다.
자식 컴포넌트에서 받은 Props안에 객체로 구분되어 닷표기법으로 불러올수있다.
그럼 useState도 가져올수있나!!!!
그렇다. 이것저것 가지고오고 싶다면 무엇이든지 자식에게 물려주는게 부모의 맘인가보다
말나온김에 State도 공부해보자면
state또한 변수를 선언하듯 let 또는 const 후에 변수명과 set변수명을 배열로짓고 = useState("")
안에 초기값을 설정한다.
설정한 useState를 설명하기위해 가상으로 만들어보자면
let [color,setColor] = useState("red")보자면 컬러의 값은 변수명이라고 보아도 된다.
컬러 = red라고 생각하고 값을 어디든 동적으로 사용할수있다.
옆에있는 setColor는 변수의 값을 변경할수있는 함수다.
버튼을 만들어 onClick 안에 실행함수를 만든후 그안에 셋컬러를 다른값으로 넣어준다면
버튼을 클릭한후엔 red가 아닌 셋컬러로 설정한 값이 적용될것이다.
이쯤에서 드는 질문은 자식컴포넌트로부터 부모컴포넌트가 Props를 받을수는 없을까?
그렇다면 자식컴포넌트 하나에 함수를 잔뜩적어 놓고 부모에게 Props로 전달해
마치 css를 여러곳에 적용할수있는것처럼 따로 함수를 모아놓은 functionContainer를 만들수 있을텐데말이다.
데이터의 단방향성 때문에 자식의 데이터를 부모에게 전달하는 방식은 불가하다.
너무 슬픈이야기지만 함수는 자식에서 부모로 올려보낼수는없다...
하지만 State함수를 Props로 보낼경우 부모에게서 받은 Props로 자식이 사용.
부모의 State의 기본값을 변경시켜 다시자식에게 가게되는데 이는 스테이트 끌어올리기 라고
부른다. 하지만 사실 이경우는 단순히 생각해 Props로 전달받은 State를 그저 자식이 사용을 했을뿐
자식으로부터 부모로 전달을 받았다고는 할수없다.
