이롭게 현명하게

목차 Component 렌더링 과정 Component 합성 Component 추출 [Component 렌더링 과정] Component는 붕어빵 틀의 역할을 한다. 그렇기 때문에 화면에는 Component가 렌더링 되지 않는다. Component라는 붕어빵 틀을 통해 찍어 나온 element라는 붕어빵이 실제로 화면에 나오게 된다. 렌더링을 위해 가장 먼저 Component로부터 element를 만들어야한다. const element = ; const element = ; 이 두 코드 모두 React element를 만들어 낸다. 이 element를 렌더링 한다. function Welcome(props){ return 안녕, {props.name}; } const element = ; ReactDOM.r..

목차 Element란? React Element와 DOM Element Element 렌더링 과정 [Element란?] Element : 어떤 물체를 구성하는 성분으로 요소, 성분이라는 뜻이 있다. 마찬가지로 리액트의 Element도 리액트 앱을 구성하는 요소를 의미한다. 리액트 공식 문서에서 Element는 리액트 앱의 가장 작은 빌딩 블록들이라고 한다. 즉, 리액트 앱을 구성하는 가장 작은 블록들을 Element라고 부른다. 웹 개발을 해본 경험이 있다면 Element를 한 번쯤은 들어봤을 것이다. Element는 원래 웹 사이트에 대한 모든 정보를 담고 있는 객체인 DOM에서 사용하는 용어이다. 그래서 Element라고 하면 DOM Element를 의미했다. 더보기 크롬 브라우저에서 개발자도구(F1..

목차 useEffect란 import 예시코드 정리 [useEffect란] useEffect는 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) , 언마운트 됐을 때 (사라질 때) , 업데이트될 때 (특정 props가 변경될 때) 특정 작업을 처리하는 방법에 사용한다. 마운트 (mount) : 나타나는 것을 의미한다. props로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청( REST API 등) 라이브러리(ex. D3, video)를 사용할 때 setInterval, setTimeout을 사용할 때 언마운트 (unmount) : 컴포넌트가 사라지는 것을 의미한다. 뒷정리 함수 setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval,cl..

목차 spread 연산자를 사용한 항목 추가 concat을 사용한 항목 추가 리액트에서 배열에 항목을 추가하는 방법은 크게 2가지가 있다. spread 연산자 사용 spread 연산자를 사용하여 기존 배열을 복사한 후 원하는 값을 넣어주는 방법 concat 함수 사용 concat함수를 사용하여 새로운 배열을 만들어 배열의 맨 뒤에 붙여준다. 더보기 https://devyihyun.tistory.com/130 [JavaScript] 자바스크립트 spread와 rest 목차 spread 연산자 rest 함수 파라미터에서의 rest 함수 인자에서의 spread [spread 연산자] spread : 펼치다, 퍼트리다 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있다. const slime = { name :..

목차 배열 렌더링 key의 존재 유무에 따른 업데이트 방식 [배열 렌더링] 다음과 같은 배열이 있다. const users = [ { id: 1, username: 'uni', email: 'uni@gmail.com' }, { id: 2, username: 'dog', email: 'dog@gmail.com' }, { id: 3, username: 'cat', email: 'cat@gmail.com' } ]; 그대로 사용하기 컴포넌트 생성 동적 배열 사용시 map함수 사용 이 배열을 컴포넌트로 렌더링 한다면 어떻게 해야 할까? import React from "react"; function UserList(){ const users =[ { id : 1, username : 'uni', email : '..

목차 input 상태 관리하기 여러 개의 input 상태 관리하기 [input 상태관리하기] 코드를 실행하면 다음과 같은 화면이 나온다. useState와 onChange 이벤트를 사용해 값을 입력하면 하단에 나타나도록 했다. // InputSample.js // import React from "react"; function InputSample(){ return( 초기화 값 어쩌고 저쩌고 ); } export default InputSample; // App.js // import React from "react"; import InputSample from "./InputSample.js"; function App() { return ( ); } export default App; 리액트에서는 in..