[리액트] Hooks

훅은 리액트 버전 16.8에서 새롭게 등장한 개념이다. 현재 대부분은 Hook를 사용하기 때문에 중요한 부분 Hook의 개념과 useState, useEffect Hook 리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트 두 가지가 존재한다. 컴포넌트에는 state라는 중요한 개념을 갖고 있는데, 이 state를 이용하여 렌더링에 필요한 데이터를 관리한다. (붕어빵 틀 : 컴포넌트, 붕어빵 : react element, 붕어빵 속재료: state) 클래스 컴포넌트에서는 생성자를 통해 state를 관리, setState() 함수를 통해 state 업데이트, LifeCycle methods를 제공하여 컴포넌트의 생명주기에 따른 기능 구현이 가능 원래 함수 컴포넌트는 state를 사용불가 했으며, 컴포넌트 생..

• format_list_bulleted 처음 만난 리액트
• · 2023. 10. 26.
• textsms

[리액트] State and LifeCycle

리액트에서 중요한 부분 State 영어단어로 상태를 의미하는데 리액트에서도 컴포넌트의 상태를 의미한다. 리액트 컴포넌트의 상태는 컴포넌트의 데이터라는 의미 리액트 컴포넌트의 변경가능한 데이터를 state라 부른다. state는 자바스크립트 객체 형태다. state는 개발자가 정의한다. 정의할 때 주의할 점 렌더링과 데이터 흐름에 사용되는 데이터만 state에 포함해야 한다. 관심 없는 값들은 컴포넌트의 인스턴스 필드에 정의하자, 관심 없는 값들까지 state에 포함되면 재렌더링 시 성능 이슈가 발생할 가능성이 있다. 클래스 컴포넌트는 생성자로 현재 state를 정의하고, setState 함수로 state들을 수정한다. (직접 수정은 잘못된 방법) class LikeButton extends React.C..

• format_list_bulleted 처음 만난 리액트
• · 2023. 10. 16.
• textsms

[리액트] Component와 Props

Component 리액트는 컴포넌트 기반 구조이다. 레고 블록처럼 컴포넌트를 조립해서 개발 컴포넌트는 함수(function)와 형태가 비슷하다. 입력(props) 값을 받아서 react element로 반환을 한다. Componenet와 react element 간의 관계는 붕어빵 틀과 붕어빵의 관계다. 객체지향에서 나오는 클래스와 인스턴스의 관계와 흡사하다. Props Property를 줄여서 사용 리액트 컴포넌트의 속성을 의미한다. 컴포넌트에 전달한 다양한 정보를 담고 있는 자바스크립트 객체 붕어빵에 들어가는 속재료 Props의 특징 read-only : 읽기만 할 수 있고, 변경은 불가능하다. 모든 리액트 컴포넌트는 Props에 관해서는 Pure함수 같은 역할을 해야 한다. Props 사용법 fun..

• format_list_bulleted 처음 만난 리액트
• · 2023. 10. 16.
• textsms

[리액트] Rendering Elements

Element란 리액트 앱을 구성하는 가장 작은 블록들 기존엔 엘리먼트를 DOM의 Element를 의미하는 단어로 사용했다. 하지만 리액트에서의 Element는 리액트 Element를 뜻한다. DOM elements와 React Elements의 차이 리액트 개발 초창기엔 현재 React Element를 Descriptor라고 불렀다. (화면에 나타나는 내용을 기술한다는 의미에서 Descriptor) Descriptor는 최종적으로 DOM Element 형태로 나타나기 때문에 통일성을 위해 React Element로 변경되었다. DOM element는 실제 DOM에 존재하고 React Element는 React의 Virtual DOM에 존재한다. React Element는 DOM Element의 가상 표..

• format_list_bulleted 처음 만난 리액트
• · 2023. 10. 15.
• textsms

[리액트] JSX란

JSX 정의와 역할 JSX란 A syntax extension to JavaScript (자바스크립트 문법의 확장) JavaScript + XML/HTML , JavaScript and XML의 앞글자를 따서 JSX라 한다. 자바스크립트 코드와 HTML 코드를 같이 쓰는 형태 const element = Hello, world! 쉽게 말해 HTML 태그를 JavaScript 문법과 같이 사용할 수 있다. JSX 역할 JSX는 내부적으로 XML, HTML 코드를 자바스크립트 코드로 변환하는 과정을 거쳐서 최종적으론 자바스크립트 코드가 나온다. 이때 리액트의 createElement가 변환하는 역할을 맡는다. // JSX 사용한 코드 class Hello extends React.Component { ren..

• format_list_bulleted 처음 만난 리액트
• · 2023. 10. 13.
• textsms

[리액트] 리액트란

인프런 처음 만난 리액트 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com 개인 프로젝트를 A-Z로 진행하기 위한 준비과정으로 리액트 공부를 시작했다. 백엔드 개발자지만 항상 어느 정도 프론트에 대한 지식과 코드를 작성할 수 있어야 한다는 생각을 갖고 있었는데 이번 기회에 리액트란 어떤 것인지 명확하게 인지하고 기본적은 사용법을 익혀보자. 들어가기 전 SPA(Single Page Application) 전통적으로 화면에는 각 html 페이지가 존재했다. 다른 컨텐츠를 보기 위해선 다..

• format_list_bulleted 처음 만난 리액트
• · 2023. 10. 13.
• textsms