Daily Coding Daily Coding

📌 비동기 작업 서버의 API를 이용할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 비동기적으로 작업을 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러가지 요청을 처리할 수 있다. 예시) setTimeout 함수 setTimeout() 실행 시점에 3초 동안 멈추는 것이 아니라, 일단 코드가 위부터 아래까지 다 호출되고 3초 뒤에 printMe() 함수가 호출된다. function printMe() { console.log("Hello World!"); } setTimeout(printMe, 3000); console.log("대기 중..."); /* 대기 중... Hello React!..

1. 컴포넌트 종류 함수형 컴포넌트 import React from 'react'; funcion App() { return ... } export default App; 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render() { ... } } export default App; 🧐 두 방식의 차이점 함수형 컴포넌트는 메모리 자원, 결과물의 파일 크기 등이 클래스형 컴포넌트보다 작다는 장점이 있다. But, 함수형 컴포넌트는 state와 라이플 사이클 API 사용이 불가하다 -> React v.16.8 이후 Hooks 기능으로 사용 가능해짐 2. 코드 작성하기 함수형 컴포넌트 function 키워드..

[React] JSX에 대해 알아보기 JSX란? - A synyax extension to JavaScript (자바스크립트의 확장 문법) - JavaScript + XML/HTML const element = Hello, world!; JSX의 역할 - XML, HTML을 JavaScript로 변환(createElement 함수 사용)하는 과정을 거친다 /* JSX를 사 zooozoo.tistory.com 1. 감싸인 요소 리액트 컴포넌트에서 요소 여러 개는 꼭 하나의 요소로 감싸주어야 한다. (root 필요) 이유🧐 Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 2. 자바스크립트 표현 JSX 내..

State란? ✨ React의 핵심 개념 - 리액트 컴포넌트의 변경 가능한 데이터 - 개발자가 직접 정의한다 - 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다(나머지는 instance에 정의하면 된다) - state는 자바스크립트 객체이다 // 클래스 컴포넌트 class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } } state는 한번 정의되면 직접 수정하면 안 된다(setState 함수를 통해 수정해야 한다) //직접 수정한 잘못된 예시 this.state = { name: 'yeonsu' }; //setState 함수를 이용한 올바른 예시..

🔥 props.name과 props.comment를 이용한 댓글 컴포넌트 만들어보기 import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText..

현재 시간을 표시해주는 element를 만들어보자! import React from "react"; function Clock(props) { return ( Hi, React! 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; 1. Clock.jsx 파일을 만들고, 현재 시간을 알려주는 컴포넌트를 만든다 import Clock from './chap_04/Clock'; setInterval(() => { const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); }, 1000); 2. index.js 파일에 1000ms마다 새롭게 Clock 컴포..

React Element 💡 리액트 앱들의 가장 작은 building block이다 React element는 DOM element의 가상표현이다 React element는 화면에 보이는 것들을 기술한다 React element는 자바스크립트 객체 형태로 존재한다(불변성의 특징을 가짐) const element = Hello, World; 실행될 때 createElement() -> React element 생성 -> DOM element 생성된다 React element 특징 React element는 불변성 특징을 가지고 있다 즉, element 생성 후 자식이나 속성을 바꿀 수 없다(업데이트 하려면 element를 재생성해야 한다) 리액트의 장점 중 빠른 랜더링 속도는 virtual DOM을 사용하..

JSX란? - A synyax extension to JavaScript (자바스크립트의 확장 문법) - JavaScript + XML/HTML const element = Hello, world!; JSX의 역할 - XML, HTML을 JavaScript로 변환(createElement 함수 사용)하는 과정을 거친다 /* JSX를 사용한 코드 */ const element = ( Hello, world! /* JSX를 사용하지 않은 코드 */ const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' /* React.createElement()의 결과로 자바스크립트 객체가 생성됨 */ const element..