반응형 ReactJS/Nomad Coders6 7.0부터 Todolist map() 사용법 - 배열 각각의 element를 바꾸고 싶을 때 배열.map(function) - map의 괄호 안에 function은 array의 모든 item에 대해 실행되는 함수 - 그 함수에서 return한 값이 새로운 array에 들어가 있다. map은 함수의 첫 번째 매개변수로 현재의 item을 가지고 올 수 있다. import { useEffect, useState } from "react"; import Button from "./Button"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setTo.. 2022. 3. 27. 6.0부터 1. state 2. props 3. useEffect import { useState } from "react"; import Button from "./Button"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev+1); return ( {counter} click me ); } export default App; component render되는 경우 - 처음으로 화면 refresh 할 때 - component의 state가 변화할 때 (state를 change하고, 그럴 때마다 모든 것이 다시 실행됨) 만약! component가 처음 render될 때만 코드.. 2022. 3. 24. [영화 웹 서비스]CREATE REACT APP (CRA) 1. create-react-app - 리액트 어플리케이션을 만드는 방식 - 많은 스크립트들과 사전설정들이 준비되어 있다. - 개발 서버에 접근, 자동으로 새로고침, 즉각적으로 어플리케이션 안에 CSS 포함 설치 1) nodejs 설치 - cmd창에 node -v으로 확인 : node.js 제대로 깔았는지 확인 - cmd창에 npx로 확인 : npx 커맨드를 실행시킬 수 있는지 확인 2) npx create-react-app {project name} cd {project name} npm start 3) code {project name} vscode로 폴더가 열린다 package.json 에서 모든 스크립트를 찾을 수 있다. 실행시킬 수 있는 script terminal에서 npm run npm st.. 2022. 3. 18. [영화 웹 서비스]Props isolation encapsulation 부모 App 에서 자녀 MinutesToHours, KmToMiles 등의 자식 컴포넌트에게 부모 컴포넌트의 데이터를 필요로 하지 않는다. *부모 컴포넌트로부터 자식 컴포넌트로 데이터 보내기 -함수형 컴포넌트 -버튼 틀(스타일)을 만들어 놓고, 이후에 "새로운" 정보를 이 Btn 컴포넌트에 전송한다. 함수에서 props(매개변수) 에서 매개변수는 로부터 전달 받는 properties reactjs는 자동으로 에 넣는 모든 property(prop)들을 오브젝트 안으로 넣는다 함수에서 props는 오브젝트이다. 아까 전달받은 모든 것들을 갖는 오브젝트이다. {props.변수이름}으로 오브젝트 안의 여러 변수 중 원하는 변수에 접근 가능 하나의 컴포.. 2022. 3. 18. 이전 1 2 다음 반응형
