WEB/react 3

리액트(2)

- state and Lifecyecle 리액트 클래스 컴포넌트에서 주로 사용하는 것들 - State : 리액트 Component의 변경가능한 데이터 -> state는 개발자가 정의함(렌더링이나 데이터 흐름에 사용되는 값만 포함해야함), javaScript 객체 - 모든 클래스 컴포넌트는 contrtuctor라는 생성자를 가지고 있음, 생성자 내부에 선언 - 생명주기 : 리액트 컴포넌트는 생성, 사용, 사망주기 가짐 사망은 상위 컴포넌트에 표시되지 않는 순간이다. - class 컴포넌트에서는 반드시 setState함수를 사용해서 state를 업데이트 해야함 - 리액트 훅 , 리액트 16.8버전부터 나옴 - 함수컴포넌트에 사용 - 클래스의 모든 기능 사용할 수 있게 됨 - 값이 바뀔 때 마다 재 렌더링 u..

WEB/react 2023.09.15

리액트 공부(1)

새로운 프로젝트에 투입됐는데 갑자기 쌩뚱맞게 리액트를 사용하게 됐다. 우선 나는 리액트 로고밖에 모르는 사람이고... 급하게 리액트 공부를 시작하게 된것이 이 글을 작성한 배경이다. 우선 기존에 사용하던 JSP와 가장 큰 차이점은 리액트는 하나의 index.html에 여러 컴포넌트를 조립하여 페이지를 동적으로 처리를 해준다. 기본적으로 라이브러리이기 때문에 react를 임포트 해서 사용을 한다. JS와 JSX가 있는데 JS는 순수 JS 함수가 들어가 있고 JSX는 동적 html 조립을 위한 xml 코드가 들어가 있는 파일이다. 렌더링 되는 시점이나 이런건 잘 모르지만 지금까지 이해한 결과로는 각각의 컴포넌트가 리턴하는 값에 의해 조립되고 로직이 처리되고 그러는거 같다. 일단 소제목 단위로 하나하나 공부할..

WEB/react 2023.09.14

1. 리액트의 이해

리액트는 어떤 데이터가 변할 때마다 어떤 변화를 줄 지 고민하는 것이 아닌 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용한다. 하지만 DOM은 느릴뿐더러 CPU 점유율도 늘어날 것이다. 리액트는 어떤 방식으로 이 과정을 빠르게 수행할 수 있을까? - 리액트의 이해 리액트는 오직 V (view)만 신경쓰는 라이브러리 입니다. 리액트 내에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트라고 합니다. ( 컴포넌트 : 재사용이 가능한 API로 수많은 기능들을 내장, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함 ) - 초기 렌더링과 리렌더링 리액트는 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 이 존재합니다. 초기 렌더링 초기 ..

WEB/react 2022.06.23