리액트에서는 true , false 로 인해서 렌더링이 될지 안될지 결정하는 Condition Rendering 이 있습니다 오늘은 이에 대해서 알아보겠습니다 Truthy , Falsy 그전에 먼저 이에 대해서 알아보겠습니다 컴퓨터 프로그래밍 자료형에서 참 거짓을 나태내는 자료형은 Boolean 이라는 자료형입니다 이 자료형에는 true , fals...

우리는 지난시간까지 React 의 라이프 사이클에 대해서 공부를 해보았습니다 이번시간에는 Event 에 대해서 공부를 해보겠습니다 Event 웹어플리케이션에서 Evnet 라는것은 어떤 사건을 말합니다 이때 이 Event 는 정말 다양한데 어떤 버튼을 눌렀다 form 양식에 데이터를 입력했다 등 정말 수 많은 이벤트로 웹사이트가 이루어져 있습니다 우리...

지난시간에는 컴포넌트가 업데이트 되는것까지 확인을 했다면 이제는 마지막 라이프 사이클중 하나 컴포넌트가 unmount 일대를 살펴볼것입니다 마찬가지로 class 버전하고 function 버전 짜로 살펴보겠습니다 componentWillUnmount 리액트에서 컴포넌트의 생명주기(lifecycle) 중 unmount 단계는 컴포넌트가 DOM에서 제거되...

지난시간에는 Class 형 컴포넌트에서 state 가 업데이트 될때 자동으로 호출되는 componentDidUpdate 를 알아보았다 그렇다면 함수형 컴포넌트에서는 어떻게 이를 만들 수 있을까? 사실 이는 우리가 앞에서 한번 보았다 그래도 다시 함수형 컴포넌트로 만들어서 진행을 해보자 useEffect useEffect(() => {호출할 함...

componentDidUpdate 이는 클래스 컴포넌트에서 사용되는 라이프사이클중 하나로 이 메서드는 컴포넌트가 업데이트 된 직후에 호출됩니다 그렇다는 것은 주로 setState 로 인해서 state 변화로 인한 컴포넌트의 재 렌더링 하고 관련이 있을것입니다 import React from "react"; class Class_mount2 ext...

지난시간에는 Class 형 리액트의 라이프사이클 중에서 Mount 에 대해서 했는데 비교를 위해서 이번에는 함수형 컴포넌트에서 이와 유사한 Hook 을 소개하겠습니다 Hook 훅은 class 형 컴포넌트에서 했었던 라이프사이클을 함수형 컴포넌트에서 하기 위해서 만들어진 기능입니다 상태를 감지하기 위한 useState , useEffect 가 대표적인...

React LifeCycle 리액트의 라이프사이클은 컴포넌트가 생성되고 제거되는 과정에서 발생하는 다양한 단계를 말하는데 이를 통해 언제 컴포넌트가 렌더링되고 업데이트 되는지 알 수 있습니다 이 내용은 원래 클래스형 컴포넌트에서만 사용된 개념이지만 함수형 컴포넌트로 넘어가서도 사용할 수 있는 개념이 되었습니다 오늘은 그중에서 class 형 컴포넌트 라...

State React 에서의 state 는 컴포넌트의 데이터 관리를 위한 핵심적인 개념입니다 컴포넌트는 자체적인 state 를 가질 수 있으며 이 state 는 컴포넌트의 상태를 나타내는 데이터를 관리합니다 React 에서는 state 가 변경되면 React 는 해당 컴포넌트를 다시 렌더링 하여 새로운 상태를 화면에 반영합니다 class 형 Sta...

소스 전체 https://gitlab.com/kimdongy1000/public_project_amadeus/-/tree/main?ref_type=heads 해당 소스는 민감한 정보를 제외한 순수 코드입니다 사용하실려면 application.yml 에 자신이 필요한 정보를 기입하시면 사용 가능합니다 해당 글을 적는부분과 소스의 올라간 부분은 상당히...

소스 전체 https://gitlab.com/kimdongy1000/public_project_amadeus/-/tree/main?ref_type=heads 해당 소스는 민감한 정보를 제외한 순수 코드입니다 사용하실려면 application.yml 에 자신이 필요한 정보를 기입하시면 사용 가능합니다 해당 글을 적는부분과 소스의 올라간 부분은 상당히...