개발의 시작과 끝

useState 가장 기본적인 훅으로서, 함수형 컴포넌트에서도 가변적인 형태를 지니고 있을 수 있게 해준다. 컴포넌트에서 동적인 값을 상태(state)라고 한다. 리액트에서는 이러한 동적인 값의 상태를 관리하기 위해 useState라는 함수를 쓴다. 함수형 컴포넌트에서 상태를 관리해야 하는 일이 발생한다면 이 Hook을 사용하면 된다. Counter.js import React, { useState } from 'react'; const Counter = () => { // 비구조화 할당 문법 // ()안에는 기본값(초기값) const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}>+1 setValu..

useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 import React, { useState } from 'react'; // 1. useState 불러오기 function Counter(){ const [number, setNumber] = useState(0); /* - 0은 초기값, setNumber는 이 함수의 상태를 바꿔주는 함수 - 원래는 useState(0)의 첫번째 원소, 두번쨰 원소를 따로 불러오는데 위와 같이 배열 비구조화 할당(구조분해)으로 하면 편하다. */ const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); // 업데이트 함수사용하여 세팅 }; const onDecrease = () => { setNum..

Hooks React Hooks는 리액트의 새로운 기능으로 React 16.8버전에 새로 추가되었다. 컴포넌트에서 React state와 생명주기 기능(LifeCycle features)을 연동(hook into)할 수 있게 해주는 함수이다. Hook은 class안에서는 동작하지 않는 대신에 class없이 React 를 사용할 수 있게 한다. 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state를 가질 수 있게 된 것이다. hook을 사용하여 앱을 만든다면 class component, render 등을 안 해도 된다. 모든 것은 하나의 function이 되어 함수형 프로그래밍이 가능해진다. 참고 - velog.io/@l..

.js / .jsx 차이 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome to React To get started, edit src/App.js and save to reload. ); } } export default App; 리액트를 설치하면 기본파일 중 App.js가 루트 컴포넌트로 생성된다. 위의 return 안에 해당하는 HTML같이 생긴 것이 JSX코드이다. JSX코드는 리액트 컴포넌트를 만들 때 사용하는 언어로, .js로 파일을 생성하면, render()에서 자동 완성이 ..

이벤트 처리 - on / off button See the Pen 이벤트 처리 ON / OFF by 김혜지 (@hjyee) on CodePen. 참고 - www.youtube.com/watch?v=eoEen2rHrm0&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=7

LifeCycle API 호출 See the Pen LifeCycle API by 김혜지 (@hjyee) on CodePen. 참고 - www.youtube.com/watch?v=mhBfAibYwHQ&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=6

state를 활용한 10초 뒤로가기 버튼 See the Pen state go back time button by 김혜지 (@hjyee) on CodePen. 참고 - www.youtube.com/watch?v=YCe3LhhOxr0&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=5

props를 활용한 간단한 게시판 See the Pen OJbQdyM by 김혜지 (@hjyee) on CodePen. 참고 - www.youtube.com/watch?v=HZlH8olDeAQ&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=4