react

[React] Props(불변 객체, Prop Drilling)

결, 꼬재랑 함께하는 레벨2 방학 스터디 😀 Props 컴포넌트에 어떠한 값을 전달할 때 props를 사용한다. 여기서 props는 properties의 줄임말이다. props는 부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드(static method)를 통해 전달할 수도 있다. props는 불변성을 가진 읽기 전용이다. porps 예시 // 함수 컴포넌트 function Coke(props){ return Hello, {props.name}; } // 클래스 컴포넌트 class Coke extends React.Component{ render(){ return Hello, {this.props.name}; } } // 비구조화 할당(구조 분해 할당) function..

[React] State의 모든 것(feat.batch)

결, 꼬재랑 함께하는 레벨2 방학 스터디 State state는 React에서 데이터를 다루기 위한 객체이다. 컴포넌트에 전달되는 props와 같이 컴포넌트의 렌더링에 영향을 주지만 state는 컴포넌트 안에서 제어된다는 차이점이 있다. state의 값이 변경되면 리렌더링 된다. state값을 변경 시키기 위해서는 setState를 호출하면 된다. 상태를 직접 변경하지 않고 굳이 setState()를 사용하는 이유가 무엇일까요? state는 불변성(immutable)을 유지해야 하기 때문이다. setState는 비동기적으로 동작하기 때문에 state를 직접 수정하면 이전 업데이트 된 데이터가 다음 업데이트 될 데이터에 영향을 줘서 예상하지 못한 버그가 발생하기 때문이다. 따라서 setState로만 sta..

[React] Key

결, 꼬재랑 함께하는 레벨2 방학 스터디 Key React에서 key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 값입니다. 따라서 key는 각 원소에 안정적인 고유성을 부여한다. key는 element를 만들 때 포함해야 하는 특수한 문자열 attribute이다. 다음과 같이 코드를 작성하면 React는 에러를 노출 시킨다. element에 고유한 key 속성 값을 넣으라는 에러 메시지가 나타나는데, 이때 index 값을 key 속성값으로 대입하면 에러 메시지는 나타나지 않으나 다음과 같은 문제가 발생한다. key값을 배열의 index로 하면 발생하는 문제! React 렌더링에서 재조정 시, 컴포넌트는 key를 보고 해당 element를 비교를 하는데 배열이 재배열 ..

[React] JSX

결, 꼬재랑 함께하는 레벨2 방학 스터디 React에서 사용하는 JSX란? JSX(JavaScript XML)는 JavaScript에 XML을 추가, 확장한 문법입니다. XML이란? XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어 졌다. HTML의 한계? HTML은 확장용이성, 구조용이성, 문서확인용이성 등에서의 한계가 나타났다. 사용자가 주어진 태그의 범위안에서만 문서내의 데이터를 다뤄야했기 때문이다. 따라서 XML이 나타나게 되었다...

[React] ReactDOM.createRoot는 뭘까?

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. ReactDOM.createRoot??? React 18에서 새롭게 나온 creatRoot() ReactDOM.render()를 대체하고 Concurrent 모드를 활성화 한다. Concurrent 모드 동시성을 향상 시킨다. 사용자 경험을 향상 시키는 렌더링 최적화 렌더링 최적화를 위해 작업의 우선순위를 결정한다. 사용자의 텍스트 타이핑에 따라 UI가 업데이트되는 검색을 예시를 들어 보겠습니다.타이핑 때마다 UI를 업데이트 하기 위해 UI가 버벅거리거나 과도한 함수를 호출을 하게 된다. 이런 현상을 해결하기 위해 디바운싱, 쓰로틀링 기법을 사용하지만 완벽히 해결은 되지 않는다. Concurrent 모드는 사용자 경험의 관점에서 이런 작..

[ReactJS]리액트 react-router-dom / HashRouter, BrowserRouter, Route, Switch, Link

리액트 react-router-dom의 사용법에 대해 간단히 알아본다. react-router-dom 패키지는 SPA을 구현할 때 사용 되어 지며 다음과 같은 패키지들은 용도를 구분하여 사용한다. - react-router 웹 & 앱 - react-router-dom 웹 - react-router-native 앱 react-router-dom 우선 react-router-dom을 설치한다. npm install react-router-dom 완료 후 App.js에 BrowserRouter, Route, Switch, Link를 import 한다. import {BrowserRouter, Route, Switch, Link} from "react-router-dom" BrowserRouter, HashR..

[ReactJS]노마드코더 리액트 기초-04. State

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. state React.js에서는 유동적인 데이터를 사용하기 위해 state 객체를 사용한다. props는 매개변수처럼 컴포넌트에 전달되지만 state는 컴포넌트 내에서 관리된다. props와 다르게 state 값을 변경할 때는 직접 조작해서는 안되며 setState 메서드를 사용해야 한다. setState 메서드를 사용하는 이유는 React는 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링 하기 때문에 직접 state를 조작하면 React는 변경된 부분을 감지하지 못한다. state를 사용하여 버튼을 누르면 카운트 되는 예제 import React from "react"; class App extends R..

[ReactJS]노마드코더 리액트 기초-03. JSX & PROPS

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. 컴포넌트 란? 리액트의 기본 단위는 컴포넌트이다. 컴포넌트는 사용자가 보는 뷰이자 기능을 단위별로 캡슐화 하여 자바스크립트 함수 혹은 클래스로 정의한다. 즉 컴포넌트는 props를 argument로 input 받고 UI가 어떻게 보여야 하는지 정의하는 React 요소를 output 하는 함수이다. 각각의 컴포넌트는 내부에서 상태를 관리하며, 컴포넌트의 이름은 항상 대문자로 시작해야 한다. function Welcome(props) { return Hello, {props.name}; } class Welcome extends React.Component { render() { return Hello, {this.pro..