velopert3 React useState를 이용한 Counter만들기 21.02.05 1. useState란 1-1. 설명 사용자에게 보여주는 컴포넌트가 동적으로 사용자 인터랙션에 따라 바뀌어야 할 때 사용한다. 컴포넌트에서 상태를 관리 할 수 있게 해준다. * 컴포넌트에서는 동적인 값을 state라고 한다 * 1-2. 사용 useState를 호출할 때는 상태의 현재값을 넣는다. useState의 반환값은 배열이며 첫 번째 원소는 현재상태, 두 번째 원소는 setter함수이다. 2. counter기본 Counter.js (src아래에 추가) import React from 'react'; function Counter() { const onIncrease = function() { console.log('+1'); }; const onDecrease = () => { co.. 2021. 2. 5. JavaScript 단축 평가 논리 계산법, 비구조화 할당 21.02.04(+21.02.05) 1. 단축 평가 (short-circuit evaluation) 논리 계산법 논리 연산자를 조금 더 유용하게 사용하는 방법이다. 논리 연산자를 사용할 때, 우리는 꼭 boolean값만 사용 할 수 있는 것은 아니다. 예시. const student = { name : "빠니몽" }; function returnName(person) { if(person) return person.name; else return undefined; } console.log(returnName(student)); 위의 문장을 더 간단하게 줄일 수 있다. const student = { name : "빠니몽" }; function returnName(person) { return perso.. 2021. 2. 5. React props, 조건부렌더링 21.02.04 1. props props는 propertyies를 뜻한다. JS에서 변수를 넘겨받고싶을 때 사용한다. 1-1. 기본 사용법 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 1-2. default props props의 default를 설정할 수 있다. App.js import Hello from "./Hello"; import React f.. 2021. 2. 4. 이전 1 다음
