728x90 [FrontEnd]19 React - Conditional Rendering과 Inline Conditions Conditional Rendering(조건부 렌더링) 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미한다. 여기서의 조건은 if와 같은 조건문이라고 생각하면 된다. 예를 들면 조건문의 결과가 True이면 버튼을 보여주고, False이면 버튼을 가리는 경우를 말한다. JavaScript의 Truthy & Falsy True나 False는 아니지만, True or False로 여겨지는 값을 의미한다. 조건문에서 사용하게 된다면 결과가 True가 될지 False가 될지 예상해서 개발해야 한다. // truthy true {} (empty object) [] (empty array) 42(number, not zero) "0", "false" (string, not empty) // falsy false 0.. 2023. 7. 1. React - Handling Events 이벤트(Event) 컴퓨터 프로그래밍에서 이벤트는 특정 사건이라는 의미를 가진다. 예를 들면 사용자가 버튼을 클릭한다 --> 이 행위 역시 사건이다. 이를 버튼 클릭 이벤트라고 부른다. 웹사이트에는 다양한 이벤트가 많이 있다. 이벤트가 발생했을 때 원하는 대로 처리를 해줘야 웹사이트가 정상적으로 작동할 수 있다. 이벤트를 처리하는 행위를 이벤트 핸들링이라고 한다. DOM의 Event Activate 이 코드는 DOM에서 클릭 이벤트를 처리하는 예제 코드이다. 버튼이 눌리면 activate라는 함수를 호출하도록 설정되어 있다. DOM에서는 클릭 이벤트를 처리할 함수를 onclick을 통해 전달한다. 리액트의 Event Activate 위의 DOM Event와 동일한 기능을 한다. 코드적으로 DOM과 다른 .. 2023. 6. 17. React - Custom Hook 만들기 Custom Hook 여러 컴포넌트에서 반복적으로 사용되는 로직을 Custom Hook으로 만들어 재사용할 수 있다. 이름은 반드시 use로 시작한다. 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수이다. import React, { useState, useEffect } from "react"; function UserStatus(props) { const [isOnline, setOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ServerAPI.subscribeUserStatus(props.user.id, handleStatusChang.. 2023. 6. 6. React - Hooks Function Component Class Component state 사용 불가 생성자에서 state를 정의 Lifecycle에 따른 기능 구현 불가 setState() 함수를 통해 state 업데이트 Hooks을 통해 클래스 Component의 기능을 모두 구현 Lifecycle methods 제공 Hook 리액트 클래스 Component에서만 가능했던 기능을 따로 작성할 필요 없이 함수 Component에서 사용할 수 있게 도와주는 라이브러리 Hook의 규칙 Hook은 무조건 리액트 함수 컴포넌트의 최상위 레벨에서만 호출해야 한다. 따라서 반복문이나 조건문, 중첩된 함수 안에서 Hook을 호출해서는 안 된다. Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다. 이렇게 해야 .. 2023. 6. 2. React - State & Lifecycle React에서의 State 리액트 Component의 상태를 의미한다. 상태가 좋은지 나쁜지의 의미가 아닌 리액트 Component의 변경 가능한 데이터를 의미한다. state는 리액트 Component를 개발하는 개발자가 정의해서 사용한다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. state가 변경될 경우 component가 리렌더링되기 때문에 렌더링과 데이터 흐름에 관련없는 값을 포함시키면 불필요하게 Component가 다시 렌더링되어 성능 저하의 원인이 되기 때문이다. 렌더링과 데이터 흐름에 관련없는 값은 Component에 인스턴스 필드로 정의하면 된다. state는 자바스크립의 객체이다. class LikeButton extends React.Component { c.. 2023. 6. 2. React - Components & Props Components 리액트는 컴포넌트 기반의 구조이다. 리액트는 모든 페이지가 컴포넌트로 구성되어 있다. 하나의 컴포넌트 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 마치 레고 블록을 조립하듯이 컴포넌트를 모아서 새로운 컴포넌트를 개발한다. 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있다. 이를 통해 자연스럽게 개발 시간과 유지보수 비용을 줄일 수 있다. 자바스크립트의 함수와 비슷하다. 입력을 받아 정해진 출력을 내보내기 때문이다. 그러나, React component에서 입력은 Props이며, 출력은 React element라는 차이점이 있다. React component의 역할은 어떤 속성을 입력받아 그에 맞는 React element를 리턴하는 것이다. 컴포넌트의 이름은.. 2023. 6. 2. React - Rendering Elements Elements Elements는 화면에 보이는 부분을 기술한다. 원래 Elements는 위 사진과 같이 DOM Elements를 의미했다. 위에 보이는 Elements는 각각 HTML 요소를 나타낸다. 리액트는 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어로 Descriptor를 사용했다. 그러나, Descriptor의 최종 형태는 DOM Element였기 때문에 DOM과의 통일성을 위해 Element라고 부르게 되었다. 따라서 리액트를 다루는 상황에서 Element라고 하면 보통 React Element를 뜻한다. Virtual DOM의 React Elements기 렌더링을 거쳐 Browser DOM의 DOM Elements가 된다. 따라서 React Elements는 DO.. 2023. 6. 1. React - JSX JSX 비공식 자바 스크립트의 확장 문법이다. JavaScript 코드와 XML / HTML 코드가 결합되어 있는 형태를 가진다. 내부적으로 XML/ HTML 코드를 자바스크립트 코드로 변환하는 과정을 거친다. 따라서 개발자가 JSX 코드로 작성을 해도 최종적으로는 자바스크립트 코드로 변환된다. 리액트로 프로젝트를 개발할 때 사용한다. React의 element를 생성한다는 말과 같은 말이다. JSX 문법 const name = 'world'; const element = Hello, {name}; JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸주면 된다. function App() { return ( Hello! World! ).. 2023. 6. 1. 이전 1 2 3 다음 728x90