프로그래밍/React.js
-
[React.js Hook] useReducer 알아보기, 실습프로그래밍/React.js 2021. 6. 23. 18:37
안녕하세요 까치입니다. 오늘은 React Hook인 useReducer에 대해 알아보겠습니다. practicePage 폴더를 생성하여 그 아래 counter라는 파일을 하나 만들어 아래 와 같은 counter소스를 구현해 보았습니다. //초기값 셋팅 const [ state , dispatch ] = useReducer(reducer, { value : 0} ); Reducer는 처음으로 초기값을 셋팅하며, 그 초기값에 reducer 라는 함수와 {value:0}라는 객체 를 초기값으로 셋팅합니다. return( 현재 카운트 = {state.value} 총누른 횟수 = {state.totalClickNum} +1 -1 ); 그리고 버튼을 누를때 increment라는 함수를 호출 하는데 그 함수안에 또한번..
-
[React.js Hook] useEffect 알아보기, 사용하기프로그래밍/React.js 2021. 6. 23. 16:09
안녕하세요 까치입니다. 오늘은 React Hook인 useEffect의 내용에 대해 알아 보겠습니다. useEffect는 언제 쓰느냐 하면 어떤 객체(화면이나 변수 클래스 등등)가 변경이 될때 useEffect내용(함수같은 내용)을 실행 시켜 화면에 그 내용을 표현하는 함수라고 보시면 됩니다. 말이 어려우니 바로 설명으로 들어가겠습니다. 먼저 practicePage 폴더를 생성하고 UseEffect.js 파일을 하나 만들겠습니다. 그리고 아래와 같이 먼저 코드를 생성해 주겠습니다. UseEffect를사용하시려면 먼저코드상단부위에 import안에 useEffect를 넣어 주시고 사용하셔야 하며 컴포넌트를 만들때 는 무조건 앞글자는 대문자로 설정해야합니다 (ex) const UseEffect = () => ..
-
[React.js Hook] useState 에 대해 알아보기프로그래밍/React.js 2021. 6. 23. 14:12
안녕하세요 까치입니다. 오늘은 react hook인 useState에 대해 배워보도록 하겠습니다. hook 은 동적인 웹페이지를 만들기 위해 존재하는 함수 인데요. 동적으로 웹페이지를 잘 만들기 위해서는 hook의 대해 잘 익히고 사용할 줄 알아야할 것 같습니다. 그럼 useState에 대해 알아 보도록 하겠습니다. tutorial이라는 앱 안에 화면을 먼저 만들어 주도록 하겠습니다. 저는 tutorial 앱안에 praticePage라는 폴더를 만들고 UsestaePrac.js라는 파일을 만들어 아래와 같이 화면을 구성 하겠습니다. practicePage라는 폴더를 생성했고 그 안에 useStatePrac이라는 파일을 만든 후 아래와 같이 코딩을 해 놓았습니다. 여기서 주의 할 점은 UseStatePra..