React

사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리. React는 선언적이고 효율적이며 유연하다. 또한 React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.imageUI를 구성하기 위해 ‘Comp

JSX란? (JavsScript Syntax eXtention) JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장 HTML과 비슷하게 생겼으나 JacaScript이고, HTML과 다른 부분 존재 실제로 배포할 경우, Trans

컴포넌트를 한 마디로 정의하자면 앱의 기능을 캡슐화하는 React의 기본 단위.쉽게는 HTML 요소를 반환하는 함수와 같다고 생각해도 된다.따라서 컴포넌트는 독립적이고 재사용 가능한 코드의 조각이다.컴포넌트의 종류로는 함수형 컴포넌트와 클래스형 컴포넌트가 존재한다.Re

props 는 컴포넌트로 전달되는 매개변수로 생각하면 된다. 쉽게 함수의 매개변수. 컴포넌트에서 어떤 값을 전달받아 처리하고 싶다면 props 를 이용한다. 그리고 컴포넌트를 호출할 때 props 를 넘겨주어야 함.기본적으로 Component에 원하는 값을 넘겨줄 때

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있음State 값이 변경되고 재렌더링이 필요한 경우, React가 자동으로 계산하여 변경된 부분을

클래스 컴포넌트에 적용되는 생명주기 (Life Cycle)에 대해 알아보자.생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 의미한다.파이썬의 클래스 객체로 예를 들면, 클래스가 생성되면 생성자가 호출되고 소멸되면 소멸자가 호출된다.간단하지만 이러한

컴포넌트가 동시에 렌더링 될 경우(리스트), 컴포넌트를 구분하기 위한 key 값이 필요하다.1, 2, 3, 4, 5가 들어있는 numbers 변수를 표현하고 있는 number이라는 리액트 엘리먼트는 즉, 컴포넌트의 리턴 값이다. 그 리턴 값을 할당하고 있는 변수는 li

✨ 인사이트 리액트 강의를 재수강하며 전체 개념들에 대해 복기하며 얻은 인사이트. 부모 컴포넌트의 setState를 자식 컴포넌트에 props로 그대로 전달하는 법에 대해 다시 한번 생각하는 계기가 되었다. ✅ 잊지 말자! setState를 그대로 전달하는건 외부에

React Hooks React Hooks는 함수형 컴포넌트에서 상태 관리, 부수적인 로직 처리, 라이프사이클 기능 등을 통합적으로 관리할 수 있다. 강의에서는 대표적인 React Hooks와 사용되는 사례를 함께 살펴보았다. 그리고 메모리 누수를 방지하는 메모이제이