[React] To Do List- ReactJS 로 영화 웹 서비스 만들기
ReatJS 실습(1) - To Do List App.js import { useState } from "react"; function ToDoList() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDo(""); setToDos((currentArray) => [toDo, ...currentArray]); }; return ( To-Do List ({..
[React] #5 Effects- ReactJS 로 영화 웹 서비스 만들기
useEffect 란? component 가 처음 render 될 때만 코드를 실행하고 싶거나 특정 state가 변할 때만 코드를 실행할 수 있도록 하는 Hook useEffect( function, dependency ) function : 수행하고자 하는 작업 dependency: 배열 형태로 function을 실행시킬 조건 [] : 처음 실행(렌더)시에 딱 한번만 실행 [object] : 해당 리스트의 값이 변화할 때만 실행 예제) import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); cons..
[React] #4 Props - ReactJS 로 영화 웹 서비스 만들기
props이란? 부모 컴포넌트로부터 자식 컴포넌트에 값을 전달하는 역할을 수행한다. 자식 컴포넌트의 유일한 인자로 부모의 state, 변수, 함수까지 다양하다. 부모 컴포넌트의 Props 전달 컴포넌트 작성 시 해당 컨포넌트 태그에 전달할 property 이름 = 값 의 형태로 사용(property 이름은 어떻게 지어도 상관 없음) 자식 컴포넌트의 Props 를 받아오는 방식 객체 형태로 전달 function Btn(props) { return ( {props.text} ) } 변수처럼 사용 function Btn({text, fontSize}) { return ( {text} ) } function App() { return ( ); } 📌 Memo란? 더보기 부모 컴포넌트가 state 변경을 겪으면 ..