CS 스터디 - React

"컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용해 복잡한 UI를 구성하도록 돕는다.javaScript만을 사용하여 화면을 구현하려면 관리가 힘들고, 웹 애플리케이션의 규모가 커질수록 성능 저하의 원인이 될 수 있다.리액트는 가벽고 유연한 라이브러리로, 필요한 부

React의 원리 React의 특징 1. Data Flow(단방향 데이터 바인딩) React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 이 뜻은 데이터가 부모 -> 자식의 방향으로만 흐른다는 뜻이다! 2. Component 기반 구조

Virtual DOM이란 실제 DOM에 접근하여 조작하는 대신 이를 추상화하여 자바스크립트 객체를 구성해 사용하는 것실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁기 때문이다.때문에 실제 DOM의 변경 사항을

하나의 파일에 javascript와 html(xml)을 동시에 작성하여 js 코드 안에서 UI 관련 작업이 가능하기 때문에 시각적으로 도움이 된다.또한, JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고메시지를 표시할 수 있게 해준다.Virtual DOM에

엘리먼트는 React가 UI를 표현하는데 사용하는 가상 DOM 요소를 나타낸다.React 엘리먼트는 실제 DOM 요소가 아니라, React에 의해 생성된 가상 DOM에 속하는 객체이다.엘리먼트는 불변(immutable)하며, UI의 상태를 나타내기 위해 사용된다.JSX

리액트 컴포넌트에는 생명 주기라는 것이 있는데 이것을 라이프 사이클이라고 표현한다.라이프 사이클이란 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다.출처: http://projects.wojtekmaj.pl/react-life

반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출할 수 없다. \- 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있기 때문이다!!위의 규칙

useEffect는 브라우저가 화면을 그리고 나서 비동기적으로 실행된다.=> 즉, 컴포넌트의 렌더링이 완료된 이후에 실행된다.useEffect 안의 코드는 렌더링 결과를 기다리지 않고 비동기적으로 실행되기 때문에, 렌더링 작업에 영향을 주지 않는다.주로 데이터 가져오기

일반적인 클래스 컴포넌트에서는 shouldComponentUpdate 메서드를 사용하여 새로운 props나 state가 변경되었을 때 컴포넌트가 리렌더링되어야 할지 여부를 결정하는데, 이 메서드를 개발자가 직접 작성해야 했다.Pure Component는 shouldCo

각 컴포넌트는 자체적으로 상태를 가질 수 있으며, 이 상태는 컴포넌트가 렌더링될 때 사용되며, 변경되면 컴포넌트가 리렌더링된다.state는 컴포넌트가 동적인 데이터를 관리하고, 이 데이터에 기반하여 화면을 업데이트할 수 있도록 도와준다. => 예를 들어, 버튼 클릭,

작성중

작성중

작성중

불변성이란, 변하지 않는 성질을 뜻한다.즉, 불변성을 유지해야 한다는 말은 초기에 할당한 값 자체를 변경하면 안된다는 것!useState(초기값)에서 초기값을 setState가 아닌 방법으로 변경하면 안된다는 것이다.setState을 활용하면 된다!setState 함수