기본적인 DOM Element(div,span 등)들의 Attribute는 camel case로 작성한다.
e.g. tabIndex, calssName 등
그러나 'data-' 또는 'aria-'로 시작하는 Attribute는 예외
e.g. data-type, aria-label
HTML의 Attribute와 다른 이름을 가지는 Attribute가 있음.
e.g. class -> className, for -> htmlFor
HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있음.
e.g. checked
(defaultChecked
), value
(defaultValue
), style
등
{/* HTML에서는 checked&value가 초기값을 의미하지만, React에서는 현재값을 의미함. */}
(<input type='checkbox' checked={false}/>)
------
{/* 초기값의 의미를 사용하고 싶다면 defaultChecked를 사용. */}
(<input type='checkbox' defaultChecked={false}/>)
React에서만 쓰이는 새로운 Attribute가 있음
e.g. key, dangerouslySetInnerHTML 등
const Names = () => {
const names = [
{ key: '1', value: '민수'},
{ key: '2', value: '영희'},
{ key: '3', value: '길동'},
]
return (
<div>
{names.map((item) => (<li key={item.key}>{item.value}</li>)}
</div>
)
}
import { userState } from 'react';
//이런식으로 직접 대입해서 변경하면 안됨!!!!!!!!! (에러가 발생하진 않으나, 카운트 값이 증가되지 않음.
function Example() {
let [count, setCount] = useState(0);
return (
<div>
<p> 버튼을 {count}번 눌렀습니다.</p>
<button onClick = {() => {count = count + 1;}}> 클릭 </button>
</div>
)
}
//첫번째 방법 :setState 내에 변경할 값을 넣기
const [count, setCount] = useState(0);
setCount(count + 1);
// 두번째 방법 :setState에 함수를 넣기
const [count, setCount] = userState(0);
setCount((current) => {return current + 1})
const [user, setUser] = useState({naem:'민수', grage: 1})
setUser((current)=>{
current.grade = 2;
return curren;
})
const [user, setUser] = useState({naem:'민수', grage: 1})
setUser((current)=>{
const newUser = {...current} // 펼쳐서 객체로 복사
newUser.grade = 2;
return newUser;
})
const myForm = () => {}