IT 개발 블로그

# state - 컴포넌트 내부에서 바뀔 수 있는값 - 두가지의 state가 있다. 클래스형 component가 가지고 있는 state 함수형 component가 가지고 있는 useState라는 함수를 통해 사용하는 state # 클래스형 component component에 state를 설정할 때는 constructor 메서드를 사용한다. 클래스형 컴포넌트에서 constructor를 작성할때는 반드시 super(props)를 호출해줘야 한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 component 클래스가 지닌 생성자 함수를 호출해준다. 그 다음에 this.state값에 초깃값을 설정했다. component의 state는 객체 형식이여야한다. render 함수에서는 현재 ..

예전에 js로 만든 코드를 살짝 바꿔서 리액트로 만들어보고자 한다. 살짝만 바꾸는건데도 에러가 많이 떠서 아..아직 리액트가 익숙하지가 않구나 했다... 처음에 복붙했는데 이러면 리액트를 사용하는 의미가 있나 싶어 state를 사용하기로! # 순서 우선은 components 폴더에 clock파일을 하나 만들어준다. state에 timer와 setTimer를 넣어주고, 초기값은 "00:00:00" 상태로 만들어줄것이다. 현재시간을 의미하는 currentTime 함수를 만들고, 이 함수에 Date 내장객체를 이용해서 시,분,초를 불러온다. 그리고 setTimer 값에 변화된 hours, minutes, seconds를 넣어준다. startTimer라는 함수를 통해서 1초마다 시간 데이터를 불러오는 setIn..

localstorage를 이용하면 된다는것은 알겠는데 어떻게 사용해야 하는지 몰라 헤매던 끝에 방법을 찾았다..! window로도 불러오고 별짓 다했는데 소용이 없었다. 물론 내가 잘못사용해서 그런걸지도... npm문서를 읽어보다 react 전역라이브러리 중 하나인 recoil을 이용하기로 했다 recoil- persist !! 사용방법도 나 같은 초보자가 적용하기에 엄청 쉽다..! # localstorage 데이터를 만들고 새로고침을하면 localstorage에 저장된 데이터가 불러져 나온다. F12 개발자 도구 => Application => Local Storage 로 가면 key와 value값으로 저장 된다는것을 알 수 있다. # recoil을 이용해 state 저장하기 우선 atom에 persi..

보호되어 있는 글입니다.

# frame input에 내용을 입력하면 list에 추가되는 형식으로 만들것. list 옆에 삭제 버튼도 구현할것이다. # 순서 input에 입력할 todo와 입력된 todo에 관한 state를 만든다. state는 string으로 처음에 빈문자열로 받을것이다. 그리고 return문에 div와 input을 만든다. 이 input의 type은 text이고 placeholder도 만들어준다. 그리고 list를 추가할 button도 하나 만들어준다. input의 value는 todo로 받을 것이고 , onchange이벤트를 하나 만들어서 input의 입력값이 변하면 받을 함수를 만든다. onchange함수는 event가 발생하면 setTodo함수가 실행된다. 이 setTodo함수는 input에 입력받은 값이..

# Effect란? 기본적으로 React.js는 component를 새로고침한다. 하지만 우리가 개발을하다보면 특정 component만 변하게하고 싶을수도 있다. 이때 필요한것이 useEffect! => state가 변화할때 code를 재실행시키는것! # useEffect()의 기능(1) 특정 component 사용 확인을 하기위해 counter와 keyword value를 만들어 놓았다. 그리고 click을하면 counter수가 증가하고, input에 keyword를 입력하면 console에 문장이 찍힌다. useEffect(첫번째인자,[dependencies])를 사용하여 첫번째인자에는 실행하려는 코드 두번째인자에는 지켜보려는코드를 넣어주면 된다. 첫번째 useEffect는 대괄호에 아무것도 받지 않..