거북이개발자

1. 배경 위와 같이 파일을 첨부했을시 다시 초기화 하고 싶을때가 있다. 2. 배경 const fileInput=useRef(); const onClearAttachment=()=>{ fileInput.current.value = ""; }; 위의 코드처럼 useRef를사용해준다. 그후 fileInput.current.value=""을 이용해 초기화 해줄 수 있다. 중요한점음 input 태그에서 어트리뷰트로 ref를 넣어줘야 한다.

1. lifecycle React의 class는 위의 사진처럼 lifecycle을 갖는다. reder가 실행되고 그후 componentDidMount()가 실행된다. 단 그후 같은 setState로는 rerender가 일어날시 componentDidMount()는 일어나지 않는다. componentWillUnmount 는 컴포넌트가 제거되기 직전일어난다. 2. useEffect 함수형은 위의 lifecycle를 이용하지 못한다. 그래서 대신 이용하는것이 useEffect이다. useEffect( ()=>{ //componentDidMount, componentDidUpdate 역할(1대1 대응은 아님) return () =>{ //componentWillUnmount 역할 } },[]); 위의 형식으로 ..

1. useRef useRef는 2가지 쓰임이 있다. dom에 직접 접근할때 hooks에서 this의 속성들을 ref로 한다. -state는 return이 다시 실행되지만 ref는 다시 실행안된다. -즉 값이 바껴도 렌더링을 다시 하고싶지 않은부분은 ref로 처리해준다. const timeout=useRef(null); const startTime=useRef(); const endTime=useRef(); startTime.current=new Date(); clearTimeout(timeout.current); 이런식으로 사용해준다. 단 current를 써줘야 한다. 2. Time 함수 setTimeout let timerId = setTimeout(func|code, [delay], [arg1], ..

0. 공부할것 리액트 함수형과 hooks의 useState를 사용하는 법 1. 목표 React를 최근에 많이 사용하고 간편한 함수형, Hook를 구구단을 통해서 component형과 비교해서 만들 적용해본다. 2. 결과 3-1. 깨달은 점 const Gugudan =() =>{ const [first, setFirst]=React.useState((Math.ceil(Math.random()*9))); const [second, setSecond]=React.useState((Math.ceil(Math.random()*9))); const [value, setValue]=React.useState(''); const[result, setResult]=React.useState(''); const onCha..