열정 실천

useState란? 함수형 컴포넌트 안에서 상태 관리를 하기 위한 Hook 🐾 State 특징 변수 대신 쓰는 데이터 저장 공간 문자, 숫자, array, object 다 저장 가능 State for WebApp : state는 변경되면 html이 자동으로 재렌더링 됨! 자주 바뀌거나 중요한 데이터들은 state에 저장 🔊 사용 방법 우선 useEffect hook을 사용하기 위해서 import 해준다. import useState from 'react'; // import 1. 선언하기 let[name, setName] = useState('내용'); 첫 번째 인자 : 값을 저장할 변수 두 번재 인자 : 변수를 변경하기 위한 함수 2. 변경하기 setName('state값 변경'); 이처럼 state의..

useEffect 클래스형 컴포넌트의 생명주기 함수 중 componentDidMount, componentDidUpdate, componentWillUnmout 의 기능을 수행한다. 즉, 1. 마운트 됐을 때 (처음 컴포넌트가 화면에 나타날 때) 2. 업데이트 될 때 (특정 props가 바뀔 때) 3. 언마운트 됐을 때 (컴포넌트가 소멸되기 직전에) 🔊 사용 방법 우선 useEffect hook을 사용하기 위해서 import 해준다. import React, { useEffect } from 'react'; //import 1. 마운트(mount) 됐을 때 useEffect의 첫 번째 인자인 함수에 실행할 코드를 작성한 후, 두 번째 인자에 이렇게 빈 배열을 두면 된다. useEffect(()=>{ co..

들어가기 전.. React의 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 현재는 대부분 함수형 컴포넌트를 사용한다. 하지만 옛날에는 클래스형 컴포넌트를 사용해 개발했기 때문에 코드를 이해하기 위해서 알아둘 필요가 있다. 다음에 클래스형 컴포넌트에 대해 공부해보는 걸로 하고! 이번 글은 함수형 컴포넌트에 대한 것이다. 기존의 웹 프레임워크는 MVC 방식으로 정보, 화면, 구동코드를 분리하여 관리했다. 정보는 Model이 화면은 View가 구동은 Controller가 담당했다. 이 방식은 코드 관리를 효율적으로 할 수 있지만 각 요소의 의존성이 높아 변경이 쉽지 않았다. 웹 사이트의 화면은 각 요소가 비슷하고 반복적으로 사용한다는 점을 착안하여 컴포넌트가 등장하게 되었다. 레고를 조립하듯이 컴포..