본문 바로가기

React

 (24)
Today I am
[React 강의 노트(4)] 커스텀 Hook 만들기, context API, Immer react강의 노트 | Byte Degree [4주차] 1. 커스텀 hook 만들어보기 useInputs - useState, useCallback import { useState, useCallback } from "react"; //커스텀 hook 만들어서 사용해보기 function UseInputs(inintialForm) { const [form, setForm] = useState(inintialForm); const onChange = useCallback((e) => { const { name, value } = e.target; setForm((form) => ({ ...form, [name]: value })); }, []); const reset = useCallback(() => se..
[React 강의 노트(3)] Hook - useEffect, useMemo, userCallback, useReducer react강의 노트 | Byte Degree [3주차] useEffect - component가 화면에 나타나게 될 때, 사라지게 될 때 등 - 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps - return 함수는 뒷정리? 함수이며 , 업데이트 직전에 호출된다 mount - component가 나타나게 될 때 unmount - 삭제될때 useEffect(() => { //comopnent가 나타남 console.log("컴포넌트가 화면에 나타남"); // return () => { //component가 사라짐 console.log("컴포넌트가 사라짐"); }; }, []); - deps(의존 되는 값)가 비워져 있는 경우 - component가 처음 화면에 나타날 때만 실행된다. - 사라지는 ..
[React 강의 노트(2)] CRUD react강의 노트 | Byte Degree [3주차] 배열 렌더링하기 Read import React from "react"; function User({ user }) { //파일안에 새로운 component 만들기 return ( {user.username} {user.email} ); } function UserList() { const users = [ { id: 1, username: "heeyeon", email: "junghy@gmail.com", }, { id: 2, username: "ggtt", email: "ggtt@gmail.com", }, { id: 3, username: "ssdd", email: "ssdd@gmail.com", }, ]; /*return ( );*/ retur..
[React 강의 노트(1)] React react강의 노트 | Byte Degree [3주차] react virtual DOM component 작업환경세팅 - node.js / yarn(npm과 비슷한데 패키지 설치시 npm보다 빠르다.) / VScode (+ git bash에서 자신의 경로 확인하기-pwd) JSX의 기본 규칙 알아보기 - html처럼 생겼지만 js이다 -> babel이라는 도구가 변환해줌 - 닫는 태그는 꼭 작성해야한다. - 두개 이상의 태그는 하나의 태그로 감싸야한다 flagment - '-'말고 camelCase로 작성해야한다. - style 적용시 html 처럼 inline으로 작성 X, 객체로 만들어서 사용해야한다. style={style} - class X, classname 사용 - 주석은 대괄호로 감싸기 {/..
React에서 'onClick' Event 실행해보기 1. 아무 parameter도 넘지기 않는 경우 간단한 이벤트는 인라인으로 onclick을 넣어서 작성하지만, import React from "react"; import "./styles.css"; export default function App() { return ( alert("hi")}>button ); } 보통 그렇게 단순하지 않기 때문에 함수 표현식으로 위로 빼서 선언한다. ⭕ import React from "react"; import "./styles.css"; export default function App() { const onclickHandler = () => alert("hi"); return ( button ); } 위와 같은 경우는 어떤 parameter도 받지 않고 있는데..
Movie-app Movie-app | Nomard-corder (정돈된 글X, 강의보고 휘리릭 정리한 글) - axios로 data 받아오기 -> npm i axios 실행 -> import axios import React from 'react'; import axios from 'axios'; class App extends React.Component { state = { isLoading: true, movies : [] } getMovies = async() => { const movies = await axios.get("https://yts.mx/api/v2/list_movies.json") } componentDidMount(){ this.getMovies(); } render(){ const {isLoa..
React Hooks React Hooks | NomardCoder ✅Check useTitle = react document의 title을 몇개의 hooks와 함께 바꾸는 것 useInput = 그냥 input 역할을 한다 usePageLeave = 유저가 page를 벗어나는 시점을 발견하고 함수를 실행 useClick = 누군가 element를 클릭하는 시점을 발견 useFadeIn = 어떤 elemet든 상관없이 애니메이션을 elemet안으로 서서히 사라지게 만듦 useFullscreen = elemet든 풀스크린으로 만들거나 일반화면으로 돌아가게 useHover = 어떤 화면에 마우스를 올렸을 때 감지 useNetwork = online offline 상태 감지 useNotification = notification ..
React Hooks 간단 예습 강의 듣기 전 / NomardCoder | YouTube hooks 예습 정리본 - hook은 결론적으로 functional component에서 state를 가질 수 있게 해줌 (class component, did mount, render 안해도 된다) - recompose + react = react hooks 1. react hooks 사용법 익히기 react hooks 사용한 count, input 만들어보기 (기본예제) useState //react hooks사용 import React, {Component, useState} from "react"; //선언 import "./styles.css"; const App = () => { //useState 2개를 준다. 하나는 value, 두번..

티스토리툴바