목록리액트공부 (3)

My Develop Log

[노마드코더]실전형 리액트 Hooks 10개 - (useEffect, useTitle, useRef, useClick) 노트정리

useEffect useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있게 하는 Hook으로, componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 하게된다. useEffect의 기본 형태는useEffect(, );이다. 다음과 같이 사용하게 되면 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트된 후, 컴포넌트가 언마운트 되기 전 모두 실행된다. // App.js import { useEffect, useState } from "react"; export default function App() { const sayHello = () => console.log("say hello"); const [number,setNumber]..
React 공부/노마드코더 노트정리 2023. 1. 16. 18:26
[노마드코더]실전형 리액트 Hooks 10개 - (useState, useInput, useTabs) 노트정리

useState 가장 간단한 Counter 예제를 살펴보면 useState의 역할을 이해하기 쉽다. // App.js import React, { useState } from "react"; export default function App() { const [item, setItem] = useState(0); let increase = () => { setItem(item + 1); }; let decrease = () => { setItem(item - 1); }; return ( my number : {item} Increase Decrease ); } // index.js import { createRoot } from "react-dom/client"; import App from "./App..
React 공부 2023. 1. 5. 17:26
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(7)

오늘은 강의를 들으면서 정리하면 좋을 것 같은 문법들을 공부하면서 정리할 예정이다. map함수란? 1. 제곱근 구해보기 var num = [4,9,16,25,36,49,64]; var result = num.map(Math.sqrt); console.log(result); // [2,3,4,5,6,7,8] 2. 기존 배열 x2를 한 배열 구해보기 var num = [1,2,3,4,5,6,7]; var newNum = num.map(number =>number *2); console.log(newNumbers); // [2,4,6,8,10,12,14] 3. 배열 안에 배열이 있는 경우 var num = [[1,2,3],[4,5,6],[7,8,9]]; //array안에 array가 있는 경우 var newN..
React 공부/노마드코더 노트정리 2022. 12. 18. 19:01
이전 Prev 1 Next 다음