리액트에서 데이터 바인딩 쉽게하는 방법
스테이트의 변경 방법
1.기존 state의 카피본을 만들고
2.카피본을 수정하고
3.modefier로 수정본을 입력한다.
//ES6 destructuring 문법 사용. State는 변수 대신 쓰는 데이터 저장공간
// useState()를 사용하여 만들어야 한다.
컴포넌트 생성시 주의사항
1.이름은 대문자로 시작해야 한다.
2.똑같이 하나의 태그로 묶어야 한다.(fragment)
3.반복출현하는 HTML 덩어리들을 컴포넌트로만들면 좋다
4.자주 변경되는 HTML UI들을 컴포넌트로 만들면 좋다.
5.다른 페이지 만들 때도 컴포넌트로 만든다.
단점
스테이트를 쓸 때 복잡해진다.
(상위component의 state를 쓰려면 props를 사용해야함)
React에서 UI를 만들때에는 데이터를 이용합니다.
모달창을 켜고 끄는 스위치
state를 지정하고 boolean값을 이용한다.
JSX 내에서 반복문은 map 함수를 사용.
for반복문을 사용하고 싶다면 ?
return 바깥의 함수 안에서 사용함.
function 반복UI(){
const 어레이 = [];
for(var i = 0; i < 3; i++){
어레이.push(<div>안녕</div>);
}
return 어레이
}map 내에서 map을 쓰고 싶다면 ?
똑같이 중괄호로 묶어서 사용
props로 자식에게 state 전해주는 법
<자식컴포넌트 작명 = {state명}/>
자식컴포넌트에 props 파라미터 입력 후 사용가능
useEffect
2개의 arg를 갖는 func
첫 arg는 딱 한번만 실행하고 싶은 코드
useEffect(() => {
//statement
},[]);
둘째 arg는 빈 배열인데
배열 내 값이 변화할때에만 실행하게 해준다
useEffect(() =>{
if(keyword.length >> 5){
console.log("keyword changed")
},[keyword])
clean-up function
useEffect 내에서 return 으로 또 다른 함수를 만들면
cleanup function이 된다.
컴포넌트가 생성될 때(show) 사용하는 유즈이팩트에
컴포넌트가 사라질 때(hide) 사용하는 clean up function (return func)
을 통해 남아있는 event listener를 지울 수 있고
컴포넌트가 분석이나 어떤 이밴트를 실행할 때 생성되는 유즈이팩트에
실행이 종료되면서 결과를 보여줄 수 있는 clean up function을 사용할
수 있다.
자주사용하는 함수는 아니다.
--
