React_useEffect & useState의 활용

useState의 활용

1) 변화를 관리할 때

ex. email, password 입력창 관리

const [ state, setState ] = useState( initialState )

const onStateHandler = function(event){ setState(event.currentTarget.value) }

 

***initialState

: 초기값

-string 값이고, 빈값일 경우 : useState( " " )

-array 이고, 빈 값일 경우 : useState( [ ] )

 

 

useEffect의 활용

어떤 상태가 변경될 때마다 rendering 시키는 것.

: 끝에 [ ] 값이 변할 때마다 렌더링함

: 끝에 [ ] 값이 비어있을 경우, 페이지 첫렌더링 시 한번만 렌더링됨.

 

https://reactjs.org/docs/hooks-effect.html

여기에서 useEffect에 대해 설명되있는걸 말씀드릴게요 

 

처음으로 컴포넌트를 rendering 한 이후에 어떤것을 하는것이라고 쓰여있네요 ! 

저희가 어떤화면 하나를 보여주려고 하면 그냥 UI 만을 보여주는 것이 아닌 그 안에 원하는 데이터를 넣어줘야하고 

그리고 그런 데이터는 데이터베이스에 들어있는경우가 많잔아요 그런작업은  렌더링 이후에 가능 하거든요 그래서 

그런작업을 useEffect에 넣어서 해줍니다 ~! 

 

react 홈페이지에서 같은 경우에는 

useEffect(() => { document.title = `You clicked ${count} times`; });

 

이런식으로 해서  타이틀을 임의로 변경해주었네요 ~~ !! 

 

 

 

**

load 되자마자 무엇을 '한번' 할 것인지 정하는 것

useEffect( ()=>{}, [ ] )

[ ] 부분이 비어있으면, DOM이 업데이트 될 때 한번만 실행함/ 그렇지 않으면 계속 됨