이롭게 현명하게

목차 props란? 여러 개의 props 비구조화 할당 defaultProps로 기본값 설정 props.children https://devyihyun.tistory.com/171 [React] 리액트 props / props란? 목차 props란? props 특징 props 사용법 [props란?] props(properties) : 어떠한 값을 컴포넌트에게 전달해줘야할 때 props를 사용한다. Component에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 p devyihyun.tistory.com [props란?] props (properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. // Tutorial.js // import Reac..

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..

리액트는 디버깅이 복잡하여 일반적인 웹페이지를 만들 때처럼 브라우저 개발자 도구를 사용하는 것에 한계가 있다. 효율적인 디버깅을 눈으로 직접 확인할 수 있어 react로 개발 시 사용하는 것을 추천한다. 리액트 디버깅과 개발을 돕기 위한 브라우저 확장 프로그램이다. 컴포넌트 계층 구조 표시 리액트 컴포넌트 계층 구조를 시각적으로 볼 수 있다. 컴포넌트의 자식, 부모 관계 등을 파악할 수 있다. 상태와 속성 시각화 개발 중인 컴포넌트의 상태(State)와 속성(Props) 정보를 실시간으로 확인할 수 있다. 이를 통해 컴포넌트가 어떤 데이터를 받고 어떤 상태를 가지는지 파악할 수 있다. 상태 변화 추적 컴포넌트의 상태 변화를 추적하고 디버깅할 수 있다. 컴포넌트의 상태가 어떻게 변경되는지, 어떤 이벤트에 ..

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

누적 방문자 수 4만 명 돌파! 3만 명 넘은 건 못 봤다🥲 정신 차리고 보니까 3만 명을 넘은 지 한참 되었던 때였다...ㅠㅠ 벌써 4만 명이라니🤭 새해라 새해 다짐으로 열심히 하겠다는 각오로 방문하는 분들이 많은 거 같다. 많은 도움이 되었으면 좋겠다. 다들 파이팅!!🥰 요즘은 강의를 들으면서 게시글을 작성하고 있다. 다만 걱정이라면 게시글을 작성할 생각에 이해를 제대로 하지 않고 작성을 한다는 것이다. 그래서 이해도 제대로 못하고 쫓기듯이 하게 되어 글도 엉망진창이고 순서도 뒤죽박죽이다...😭 다시 초심으로 돌아가서 제대로 작성해 볼 예정이다. 쓸데없는 고민이라면 게시글을 다 지우고 작성을 할지 게시글 내용을 수정할지가 고민이다.🤔 [목표] 초심으로 돌아가서 게시글을 작성하자 T-LOG 목표 달성 ..