TIL | React Library

\->  Ex) Webucks main 페이지를 Component로 나눈다면, 크게 Nav 컴포넌트와 Main 컴포넌트로 나눌 수 있으며, 화면의 구성 요소들을 컴포넌트로 나눌 수 있다.재활용하여 사용할 수 있다.코드 유지보수에 좋다.해당 페이지가 어떻게 구성되어

JavaScript Syntax Extension의 약어로 React에서 사용하는 자바스크립트 확장 문법이다.JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.HTML 태그를 그대로 사용하기 때문에 보기 쉽고

SPA (Single Page Application) : 페이지가 한 개인 애플리케이션리액트 프로젝트에선 .html 파일의 개수는 1개 >>> SPA(Single Page Application)라우팅(Routing) : 다른 경로(url 주소)에 따라 다른 View(화

<Link> 컴포넌트 사용법useNavigate 사용법react-router-dom 에서 제공하는 <Link /> 컴포넌트는 DOM에서 <a> 로 변환(Compile) 된다.<a> 태그와 마찬가지로 <Link /> 컴포넌트도 지정한 경로로 바

⚙️ State > - state : 상태 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미 화면에 보여줄 컴포넌트의 UI 정보(상태) Component 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있음. > state를 설정할 때는 

props : properties(속성), 단어 뜻 그대로 컴포넌트의 속성값props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체를 의미한다.props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다.(변수, state 값, eve

이름 그대로 변하지 않는 데이터 => 정적인 데이터UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다.반복되는 UI를 하드코딩으로 작성하면, 코드가 길어져서

1\. 유저가 이메일을 입력합니다.Email Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다.2\. 함수에서 Email Input의 value를 setId를 통해 업데이트 합니다.3\. 유저가 비밀번호를 입력합니다.Password Input의 on

Virtual DOM은 말 그대로 가상 돔입니다. 그런데, 가상 돔이 왜 필요할까요? 이를 이해하기 위해서는 브라우저의 작동 방식에 대해 알아볼 필요가 있습니다."브라우저 엔진"과 "렌더링 엔진"은 뭘까요?그림에서 알 수 있듯이 브라우저 엔진은 사용자 인터페이스와 렌더

DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.그렇다면 여기서 말하는 문서 객체란 무엇일까?문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있

React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위입니다.렌더링의 결과물은 UI 요소, 그러니까 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들이라고 할 수 있습니다. 렌더링 결과물에 영향을 주는

이전 챕터에서 side Effect에 대해서 알아보고, 함수형 컴포넌트의 side Effect는 어떤것들이 있는지 알아봤습니다. 하지만 이런 side Effect들을 함수의 body 자리(render)에서 실행시키면 안됩니다.앞서 함수 컴포넌트의 리턴 값은 UI 요소라

마지막으로 Effect 이후 일어나는 Cleanup Effect에 대해서 알아보겠습니다.Cleanup Effect 는 간단하게 설명하자면, 이전에 일으킨 Side Effect를 정리할 필요가 있을 때 사용합니다.앞에서 예시로 들었던 Side Effect 중 여러분이 조