이롭게 현명하게

Component를 만들 때는 두 가지 방법으로 만들수 있다. Function Component Class Component React Component를 만들기 위해 터미널에서 yarn start명령어를 실행한다. $ yarn start // 또는 $ npm run start src 디렉터리에서 새로운 파일을 만들었다. import React from 'react'; : 리액트 컴포넌트를 만들 때 꼭 써야 한다. '리액트를 불러와서 사용하겠다.'라는 의미이다. import React from "react"; 함수형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용한다. Tutorial이라는 컴포넌트를 만들었다. 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있다. 이것을 JSX라고 부..

목차 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는 컴포넌트의 성능을 최적화하기 위해 사용된다. Memo는 memoization를 의미한다. 메모리 넣기라는 의미로 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 재사용하는 것을 말한다. 동일한 계산의 반복 수행을 제거하여 프로그램 실행속도를 빠르게 하는 기술이다. [import] import React,{useMemo} from "react"; const 변수명 = useMemo(()=>함수명(),[deps]); 첫 번째 파라미터 : 함수 형태 두 번째 파라미터 : deps배열을 넣어준다. 내용이 바뀌면 : 함수를 호출해서 값을 연산 내용이 바뀌지 않으면 : 이전에 연산한 값을 재사용 ..

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

목차 map 함수를 사용한 배열 항목 수정하기 정리 [ map 함수를 사용한 배열 항목 수정하기 ] 불변성을 지키면서 배열을 업데이트할 때 자바스크립트 배열 내장함수 map 함수를 사용해야 한다. 기존의 map 함수는 배열을 특정 형태를 가진 형태로 변환해 줄 때 사용했다. 특정 객체 배열 컴포넌트 Element 형태로 변환해 줬었는데 배열에 있는 특정 요소만 업데이트할 때도 map 함수를 사용할 수 있다. 더보기 https://devyihyun.tistory.com/144 { const {name,value} = e.target setInputs({ ...inputs, [name]:value }); } const [users,setUsers] =useState([ { id : 1, username : ..