사용 기능 - Map - useState //App.js import { useState } from "react" function App() { //input 입력 값 관리 const [toDo, setToDo] = useState("") //To do List 상태 관리 const [toDos, setToDos] = useState([]) //BtnClick Event const onSubmit = (e) => { e.preventDefault() //input 입력 값이 빈 값이면 다시 돌려보냄 if (toDo === "") { return } //입력 값을 현재 배열과 더해 새로운 배열을 생성 setToDos((current) => [...current, toDo]) //입력 값 초기화 setTo..
useEffect는 컴포넌트가 빌드 되었을 때, 업데이트 될 때 마다 실행하게 되는 훅 입니다. export default function Count () { const [count, setCount] = useState() console.log("Count On") return setCount((current) => current + 1}>{count} } 위와 같은 코드를 작성하게 되면, count의 상태가 변경될 때 마다 React는 컴포넌트를 refresh하기 때문에, console.log("Count On") 부분이 계속 찍히게 됩니다. 하지만 저희는 해당 컴포넌트가 빌드 되었을 때 한 번만 실행하고 싶기에 useEffect를 사용하게 됩니다. import { useEffect } from 'r..
React props의 타입 문제 React는 props에 매개 변수를 넘길 때 타입 검사를 하지 않는다. 나는 Number 자료형으로 넘겨 받고 싶지만, 만약 String이 넘겨와도 문제가 되지 않는다 HTML 삽입 미리보기할 수 없는 소스 const Age = (props) => { return {props.age} } const App = () => { return( ) } 위와 같은 경우가 생기기에, 좀 더 타입을 명확히 해주기 위해서 PropsTypes 기능을 사용한다. //prop-types 모듈을 설치한다. npm install prop-types Proptypes 사용 방법 이제 을 사용하게 되면 타입이 맞지 않아 문제가 된다. const Age = (props) => { return {p..
props란? 컴포넌트를 빌드할 때, 컴포넌트를 생성하는 함수의 매개 변수로 전달이 가능한 기능 아래의 코드는 input tag의 상태를 useState로 관리하여 그 값을 Btn 컴포넌트 props에 넘겨주는 코드 입니다. HTML 삽입 미리보기할 수 없는 소스 props에 넘길 수 있는 값 props에는 일반적으로 데이터를 넘기지만, 함수 등 다양한 값을 넘길 수 있다. const Test = ({name, click}) => { return( {name} ) } const App = () => { const onClick = () => { window.alert("Click Success") } return( ) }
ES6란? ECMAScript 2015 혹은 ECMAScript 6는 ECMAScript의 표준 버전이다. 문법의 해당 사항으로는 아래와 같다. 변수 선언, const & let 화살표 함수, Arrow Function 템플릿 리터럴, Template Literals 기본 매개 변수, Default parameters 배열, 객체의 비구조화, Array & object destructing 가져오기 및 내보내기, import & export 프로미스, promise 클래스, Class 나머지 매개 변수 및 확산 연산자, Rest parameter & Spread operator 변수 선언, const & let const와 let은 변수 선언을 위한 새로은 ES6의 키워드다. //기존 변수 선언 var ..
" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스
React CDN React, ReactDom, Babel을 사용하기 위한 CDN이다. /* react cdn */ /* babel cdn */ JS를 이용하여 Counter 페이지 만들기 Btn을 클릭할 시 Total 횟수가 증가하는 Page를 JS를 이용하여 만들어보자. HTML 삽입 미리보기할 수 없는 소스 Click Total : 0 React를 이용하여 Counter 페이지 만들기
01. src 폴더 안에 components 폴더 생성 후 Hello.js파일 생성 cd src mkdir components cd components touch Hello.js 02. Hello Function 생성 후 Tag 반환 export default function Hello () { //1 return( Hello React ) } //1 export default 설정을 해두면 해당 파일을 읽을 때 기본적으로 해당 함수(Hello)를 호출한다. 03. App.js에서 호출하기 import Hello from "./components/Hello"; //1 export default function App() { return ( //2 ) } //1 import from을 사용하여 Hello ..