본문 바로가기
728x90
반응형

IT/React36

For루프 예제 import React, { useState } from 'react'; function Fort1(props) { const [fruitList] = useState(["딸기", "배", "사과", "포도", "수박", "망고", "오렌지"]); //모던스크리브가 배열에 forEach, map, reduce 함수를 추가하고 //forEach 배열의 요소마다 출력과 관련된 함수를 매개변수로 전달 //map은 매개변수로 콜백함수 - 반환값이 있는 콜백함수 return ( 과일목록 { fruitList.map( (item, index) => { return ( {index}{item} ) }) } ); } export default Fort1; 2022. 9. 23.
props, useState, 계산기 예제 클래스 컴포넌트 기능 => 훅이라고 하는 기능으로 옮겨가며서 함수기반 컴포넌트 + 훅 => 클래스 컴포넌트를 대체 react-컴포넌트를 만들때 rsf 를 하면 함수기반 컴포넌트를 만들어준다. props : 함수를 호출하는 쪽에서 매개변수를 주면 매개변수를 받아오는 객체이다. useState: state props : 부모로부터 자식컴포논트한테 값을 부여하고자 할 때 props 객체를 사용한다. state : 자신의 상태값을 저장하고 있다. 반드시 상태값은 state에 저장해야맘 onChange 이벤트는...이벤트를 발생시킨 객체에 참조를 가지고 온다. input 태그와 state에 저장된 변수를 연동하기 import React, { useState } from 'react'; function Calcul.. 2022. 9. 23.
useState 함수 사용예 setState() - 함수 기반 상태 관리 React Hooks에서 제공하는 useState() 함수를 사용해서 위의 클래스 기반 컴포넌트를 함수 기반으로 재작성해보았습니다. setState() 함수는 배열을 리턴하는데 첫 번째 원소는 상태 값을 저장할 변수이고 두번 째 원소는 해당 상태 값을 갱신할 때 사용할 수 있는 함수입니다. 그리고 setState() 함수에 인자로 해당 상태의 초기 값을 넘길 수 있습니다. const [, ] = useState(); 예제) import React, { useState } from 'react'; function Counter(props) { // 공통변수 // 1) 변수와 2)변수의 값을 바꿀 수 있는 함수.... // 두개를 짝궁으로 리턴하는 기능. // u.. 2022. 9. 23.
JSX 문법 JavaScript 를 확장한 문법 예제) style 을 적용시키는 방법. 아래 예제는 style을 적용시키는 예제이다. let 변수로 style 을 갖고 있는 변수를 만들고... 사용하는 예제이다. import React from 'react'; function Counter(props) { let titleStyle = { fontSize: "23pt", color:"red" } return ( This is a counter This is another counter ); } 2022. 9. 23.
728x90
반응형

티스토리툴바