1. 이벤트 버블링
가. 이벤트 버블링이란?
1) 어디든 클릭하면 동일한 로직이 실행되게 하는 것
2) 자식에서 부모에게 전달, 역은 이벤트 캡쳐링
나. 해결법
1) 자식 div에 다 때려박기->비추
2) event.currentTarget.id로 하면 됨
2. input value 초기화
가. 댓글 등록하고 input에 남아있는 입력값 초기화 하기
나. 해결법
1) 등록하기 버튼 클릭하면 빈 string 넣어주기(하드코딩)
2) 제어컴포넌트 이용하기
placeholder 있어도 defaultvalue가 나옴
input에 value라는 값이 있음
value는 무조건 그 값
바꿀 수 없음
defaultvalue는 첫 값만 나오고 나중에 바꿀 수 있음
state에 입력
컨테이너 return에서
writer = {writer}
password = {password}
contents = {contents}
presenter에서
input 위치에다가
value = {props.writer}로 해주고
value = {props.password}로 해주고
value = {props.contents}로 해주고
이러면 value에 입력이됨
원리
글자를 쓰는 순간 onchange가 작동하고 event.target.value에 글자가 입력되고 state가 바뀌게되고
변견된 state가 props타고 return에 writer={writer}가 되고 presenter에 props.writer가 입력된 글자로 바뀌어서 보이게 됨
onclick에서 setWriter(""), setPassword(""), setContents("")를 해두면 끝
그러면
container가 const [writer, setWriter] = useState("ㅂㅂㅂ") 해두면 input에 달라붙어(제어 컴포넌트, controlled component)가 되어있음
이러면 등록하기 버튼 누르고 state만 빈값으로 바꿔주면 ㅂㅂㅂ이 나오게 됨
다. 제어컴포넌트가 그럼 개꿀아님?
1) props가 돌기 때문에 장문의 글 같은 경우 버벅거릴 수 있음
2) 간단한 서비스에서는 쓰거나 계좌번호 같이 중요하게 작성되야하는 정보에서 사용하면 안전해짐
3. 외부 라이브러리 사용
ant design사용
