전체 글

const [state, setState] = useState({ isOpen: false, data: '' }); 객체로 묶어서 선언하면 된다.

useEffect(() => { console.log('a'); return () => console.log('b'); // 클린업 함수. }, [count]); // 의존성 배열 useEffect의 반환값을 "클린업 함수"라고 함 useEffect의 효과(effect)를 정리(cleanup)하는 역할. 클린업 함수는 다음 useEffect가 실행되기 전에 호출됨.

코드 작성 App.js import './App.css'; import Hello from './component/Hello'; function App() { return Props : properties ; } // 프로퍼티로 준 값이 Hello 컴포넌트에 인자로 전달됨. export default App; Hello 컴포넌트에 age라는 프로퍼티를 설정한다. Hello.js import { useState } from "react"; export default function Hello(props) { const [name, setName] = useState("Mike"); const [age, setAge] = useState(props.age); const msg = (age > 19) ? "성..

state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 React는 자동으로 UI를 다시 그려준다. 그래서 사용자 입장에서 다시 그려줄 필요가 없어 편리하다는 장점이 있다. 예제) 📁 Hello.js export default function Hello() { let name = "Mike"; function changeName() { name = (name === "Mike") ? "Jane" : "Mike"; } return State {name} Change Name ; } changeName() 함수는 이름이 Mike일 때는 Jane으로, Mike가 아니면 Mike로 변경한다. 이 함수를 버튼의 이벤트 함수로 작성하여 버튼이 클릭됐을 때 태그의 내용이 바뀌도록 했다. 💥근데, 버튼을 ..

구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. in ES5 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다. var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 in ES6 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이 때 배열 디스트럭처링 할당의 대상(할당문의 우..

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 버튼에 이벤트를 추가하는 예제를 통해 이벤트 처리하는 방법에 대해 알아보자. 우선 아래와 같이 Hello.js의 내용에 태그를 추가한다. export default function Hello() { return Hello Show name Show age ; } 방법 1. 함수 showName() 함수를 추가하여, 버튼의 onClick 옵션으로 넣어준다. 여기서 주의할 점은 중괄호 내부에 showName이 아닌 showName()을 작성하게 되면 showName() 함수가 반환하는 값이 들어가게 되어, undefined가 반환되므로 주의하자. export default function Hello() { function show..