개발의 시작과 끝

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

LifeCycle API 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. Ex) // props로 받아온 값을 state로 동기화 하는 작업을 해줘야하는 경우에 사용됨. static getDerivedStateFromProps(nextProps, prevState) { if (prevState.value !== nextProps.value) { return { value: nextProps.value } } return null; } // 특정 조건에 따라 렌더링을 막아줄 수 있는 함수. shouldComponentUpdate(nextProps, nextState) { if (nextProps.value === ..