props3 TodoList 연습 투두리스트 연습 import React, { useState } from "react"; import "./App.css"; import TodoBoard from "./components/TodoBoard"; function App() { const [input, setInput] = useState(""); const [todoList, setTodoList] = useState([]); const addItem = () => { setTodoList([...todoList, input]); }; return ( { setInput(event.target.value); }} > 추가 ); } export default App; 필요한 컴포넌트를 임폴트 해온다. state를 이용하여 데이터를 저장한다 .. 2022. 12. 13. 리액트 -Component 간단하게 사용자 정의 태그를 만드는 것! 규칙 -대문자로 함수를 만든다 -propps를 통해 외부로 부터 전달 받을 수 있다. propps는 component에게 속성을 전달한다. -component는 꼭 하나의 태그를 반환 해야함 -class 를 받을 때 className를 사용 -자바스크립트 파일을 작성할 때 {} 중괄호를 사용해야 한다. -state 컴포넌트에서 동적인 값을 state라고 부른다// 상태 관리 라이플사이크에 따라서 이 화면이 값이 변화되었을때 변화된 값을 화면에 리랜더링 시켜 주기 위한 조건들이 있는데 그 조건중 하나가 state 변경 되었을때 usestate는 state를 만들어주기 위해서 리액트에서 제공하는 기능/ 기능이라 안부르고 hook 이라고 부름 원시 .. 2022. 12. 9. react React 데이터를 State(내부상태) Props(외부로 부터 전달받은 상태) 나타내는 render가 있다. 상태가 변경될때마다 re-render 된다 실제로 변경된 부분만 화면에 업데이트 된다. Componnent(컴포넌트) 컴포넌트는 JavaScript의 함수와 유사, react 요소들을 받아 반환 받는다 function App() { const name = "teawook"; const list = ["우유", "딸기", "바나나"]; return ( {`hello ${name}`} {list.map(function (item) { return {item}; })} ); } export default App; 함수 컴포넌트 JSX JSX는 페이스북에서 스펙을 정의한 XML과 비슷한 자바스크립ㅌ 확.. 2022. 12. 7. 이전 1 다음
