본문 바로가기
728x90
반응형

IT/React36

React TypeScript 프로젝트 생성하기 1. 관리자 권한으로 Command 창을 열고 아래 명령 실행 - npx create-react-app 프로젝트명 --template typescript - 프로젝트명은 반드시 소문자로 해야 함. 예) npx create-react-app prov-ui --template typescript 참고) https://mynameisleeminee.tistory.com/48 React Typescript 프로젝트 생성 1. 새로운 React TypeScript 프로젝트 만들기 npx create-react-app [프로젝트 명] --template typescript or yarn create react-app [프로젝트 명] --template typescript 1-1. 이미 만들어진 프로젝트에 TypeS.. 2022. 9. 29.
JSON 형태로 데이터 저장하기 흠...서버와 통신을 하기 위한 밑밥같은...소스임... useEffect() 함수는 나중에 공부해야 할것임. import React, { useState, useEffect } from 'react'; function Hero(props) { //JSON 형태로 데이터 저장하기 const [heroState, setHeroState] = useState([ {"id":"1", "name":"홍길동", "description":"율도국 세움"}, {"id":"2", "name":"이순신", "description":"전쟁의 신"}, {"id":"3", "name":"강감찬", "description":"귀주대첩"}, {"id":"4", "name":"데니슈", "description":"멋쟁이"}, {".. 2022. 9. 23.
useEffect() 함수 https://xiubindev.tistory.com/100 React Hooks : useEffect() 함수 useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정.. xiubindev.tistory.com 2022. 9. 23.
For 예제2 - 배열에 목록 추가하기 목록 추가시, push를 하면 안되고, concat 을 사용한다는 게 중요. import React, { useState } from 'react'; function For2(props) { const [fruitList, setFruitList] = useState(["딸기", "배", "사과", "포도", "수박", "망고", "오렌지"]); const [fruit, setFruit] = useState(""); //모던스크리브가 배열에 forEach, map, reduce 함수를 추가하고 //forEach 배열의 요소마다 출력과 관련된 함수를 매개변수로 전달 //map은 매개변수로 콜백함수 - 반환값이 있는 콜백함수 const onChange = (e) => { setFruit(e.target.va.. 2022. 9. 23.
728x90
반응형