울렁울렁~~ 울렁울렁~~

🔑 [keyword]설정 함수 1-1. 정리 함수의존성 배열 📺 참고 강의React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈컴포넌트가 Mount, Update, Unmount될 때, 특정작업을 처리시켜줄 코드가 필요하다면 useEffect를 활용하면 됩니다.기본적으로 useEffect 훅은 인자로 콜백함수를 받습니다.콜백함수란 다른 함수의 인자로 전달된 함수콜백함수 내부에 우리가 처리할 작업을 입력해줍니다.useEffect(()=>{}) 하나의 콜백함수만 받는 경우첫 번째 인자로 콜백함수, 두 번째 인자로 배열(dependencies)배열이 빈 배열일 때화면에 첫 렌더링 될 때만 실행됩니다.clean up- 정리첫 번째 인자 return 값에 함수를 넣어줍니..

useState – React🗯️ 공식 문서const [state, setState] = useState(initialState)매개변수initialState:state의 초기 설정값입니다.어떤 유형의 값이든 지정할 수 있지만 함수에 대해서는 특별한 동작이 있습니다.이 인수는 초기 렌더링 이후에는 무시됩니다.함수를 initialState로 전달하면 이를 초기화 함수로 취급합니다.이 함수는 순수해야 하고 인수를 받지 않아야 하며 반드시 어떤 값을 반환해야 합니다.React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장합니다.반환값useState는 정확히 두 개의 값을 가진 배열을 반환합니다.현재 state입니다.첫 번째 렌더링 중에는 전달한 initialState와..

리액트 공부를 하며 html 태그를 쓸 일이 많은데 따로 설정해두지 않으면 자동완성이 되지 않아 방법을 찾아보았다.아주 간단하게 해결할 수 있다. 1. vscode 최하단 영역의 JavaScript 클릭  2. 그러면 상단에 이런 화면이 뜬다  3. JavaScript JSX 를 검색해서 선택하면 설정 완료!  4. 이제 편하게 자동완성 기능을 활용할 수 있다.

clean up- 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하는 과정- useEffect안에서 return을 하고 실행되길 원하는 함수를 작성// src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(()=>{// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수  return ()=>{// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수}}, []) return hello react!}; export default App; import { func } from "prop-types";import { useState, useEffect } from "react";fu..

DOCTYPE html>html> body> div id="root"> --> click me --> div> body> script src="https://unpkg.com/react@18/umd/react.production.min.js">script> script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js">script> script src="https://unpkg.com/prop-types@15.7.2/prop-types.js">script> script src="https://unpkg.com/@babel/standalone/babel.min.js">script> script type="text/babel"> c..

1. 들어가기에 앞서- vue를 배우고 이를 활용하여 웹페이지를 만드는 프로젝트를 진행하였으나 프론트엔드 개발자가 되기 위해서는 vue만으로는 부족하고 반드시 React 공부도 필요하다고 생각해왔다. 학기 중에 인프런에서 기초 강좌인, "처음 만난 리액트"를 수강하였지만 코딩공부는 뭐니뭐니 해도 직접 결과물을 산출하며 익히는 것이 가장 좋은 방법이라고 생각해 영화 웹 만들기 강좌를 수강하게 되었다. - 강의 페이지에 따로 스켈레톤 코드 등이 업로드 되어있는 것 같지 않아 다른 사람들에게 강의에 활용된 코드를 공유하고 내 공부 기록도 저장할 겸 블로그에 업로드 한다.  2. 학습 내용- 처음엔 분/시간으로 변환하는 코드를 작성하였다.- 그 다음에는 처음 배운 코드를 기반으로 select를 활용에 km/mi..

Components와 Props – React공식 문서1. Components와 Props의 정의React는 Component기반의 구조리액트에서는 모든페이지가 component로 구성되어 있고하나의 component는 다른 component로 구성되어 있기도 함→ 마치 레고 블록을 조립하듯 component들을 모아서 개발위 사진에서의 A,B와 같이 여러 component를 반복하여 하나의 페이지를 구성하나의 컴포넌트를 반복적으로 사용하여 개발시간와 유지보수 비용을 줄일 수 있음1-1. component의 구조자바스크립트의 함수와 유사함입력을 받아 출력하는 구조그러나 다른 점이 있는데 그것은 Props를 입력받아 element를 출력하는 것객체 지향 class(component) / instance(e..