전체 글
Conditional Rendering
Conditional Rendering이란? 조건에 따라 다른 컴포넌트나 UI 요소를 렌더링하는 것 ex) True -> ShowButton() / False -> HideButton() 예제 코드 function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; } return ; } Javascript Truthy와 Falsy Truthy : True는 아니지만 True로 여겨지는 값 Falsy : False는 아니지만 Fa..
Handling Events
Event Handling 이벤트 핸들링(event handling)이란 웹 페이지에서 사용자 상호작용(user interaction)과 관련된 동적인 기능을 구현하기 위해 사용되는 기술이다. 이벤트란 사용자가 발생시키는 클릭, 키보드 입력, 스크롤 등과 같은 행위를 의미 이러한 이벤트가 발생했을 때 브라우저가 이를 감지하고, 이벤트를 처리할 수 있는 JavaScript 코드를 실행하는 과정이다. 사용자 상호작용에 따라 동적으로 반응하거나, 데이터를 업데이트하거나, UI를 변경하는 등 다양한 동작을 수행 가능하다. DOM / React Event // DOM Activate // React (camel case) Activate Event Handler (Event Listener) 이벤트를 처리하는 함..
Hooks
Hook이란? - 리액트 버전 16.8에서 생긴 개념 - 최근 리액트 개발은 대부분 hook을 사용 Function Component Class Component state 사용 불가 생성자에서 state를 정의 Lifecycle에 따른 기능 구현 불가 setState() 함수를 통해 state 업데이트 Hooks Lifecycle methods 제공 원하는 시점에 정해진 함수를 호출하기 위함 대표적인 Hook useState() state를 사용하기 위한 Hook // useState 사용법 const [변수명, set함수명] = useState(초기값); //useState()함수 필요한 예제 import React, { useState } from "react"; function Counter(pr..
State and Lifecycle
State 리액트 Component의 변경 가능한 데이터 state는 개발자가 정의하며 Javascript 객체이다. State 정의시 중요한 점 반드시 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 왜냐하면 컴포넌트가 불필요하게 다시 렌더링되어 성능저하를 유발시킴 그렇지 않은 값은 인스턴스 필드로 정의 class LikeButton extends React.Component { // 생성자 constructor(props) { super(props); // state 정의부 this.state = { liked: false }; } ... } // state는 컴포넌트의 렌더링과 관련이 있어 // 임의로 수정시 개발자의 의도대로 작동하지 않을 가능성이 있음 // 고로 setState..
Components and Props
Components 리액트는 Component기반 (Component-based)의 구조 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여 전체 페이지를 구성 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. Props property의 준말인 prop의 복수형이며 react에서 prop은 속성이라는 뜻으로 사용된다. 리액트 컴포넌의 속성이자 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. Props의 특징 Read-Only (값을 변경 할 수 없다) 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props에 대해서는 같..
Rendering Elements
Elements란? Elements are the smallest building blocks of React apps 리액트 앱을 구성하는 가장 작은 블록들 DOM Element React Element Browser DOM Virtual DOM 많은 정보 / 크고 무거움 간략화 / 가벼움 React Elements 생김새 자바스크립트 객체 형태로 존재하며 불변성(Immutable)을 가짐 // 변환 전 React Element { type: 'button', props: { className: 'bg-green', Children: { type: 'b', props: { children: 'Hello element!' } } } } // 변환 후 DOM element Hello element! cre..