[React] React 문법 정리

외부 컴포넌트에서 특정 컴포넌트가 상위에 오도록하는 방법(?)

const App = ()=>{
	return (
    	<Hello>
      		<div>Hello</div>
      	</Hello>
    )
}

const Hello = ({children})=>{
	return (
      	<div>
      		{children}
      	</div>
    )
}

비구조화 할당

함수형 업데이트

• useState의 setter함수에 함수를 인자로 주는 것
• 컴포넌트 최적회에 사용

input이 여러 개일 때

• 각 input에 useState를 정의하면 비효율적!
• 비구조화 할당을 이용해 하나의 변수로 취급(?)

const [inputs, setInputs] = useState({
	firstName : '',
  	lastName  : '',
})

/* React에서 객체를 수정할 때,
객체를 그대로 수정하면 안됨.
새로운 객체를 할당하고 
*/
const onReset = ()=>{
	setInputs({
    	firstName : '',
  		lastName  : '',
    })
}


/*
{value, name} == e.target
value : 값
name : input 태그의 name
*/
const onChange = ({value, name})=>{ 
  	setInputs({
    	...inputs,
      	[name] : value,
    })
}

useRef

• 특정 DOM을 사용해야 할 때 쓰는 hook
• 컴포넌트 내에서 사용하는 변수를 정의할 때
  (단 ref변수 수정 시에는 reload되지 않음)
• 클래스형 컴포넌트에서는 React.createRef를 사용한다.
• 태그에 ref 속성 정의
• ref 변수에 든 값을 조회할 때는 ref변수.current

배열.map(원소 => 새로운 컴포넌트)

• map으로 배열을 렌더링할 때 key값이 필요한 이유
• key값이 존재하지 않으면 원소 업데이트 비효율적으로 동작함
  (덮어쓰기 방식)