Daily Coding Daily Coding

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 함수를 이용한 올바른 예시..

💡 클로저 1. 이름이 없는 함수 2. 일정 기능을 하는 코드를 하나의 블록으로 모아놓은 것 코드를 유용하게 작성하기 위해 사용한다. 클로저 표현 방법 클로저가 함수의 모습이 아닌 하나의 블록 모습으로 표현될 수 있는 방법 { (매개변수들) -> 반환타입 in 실행코드 } ** in이라는 키워드는 정의부와 실행부를 분리하기 위해서 사용한다 함수와 클로저 비교 ** 함수는 클로저의 한 형태이다 let names: [String] = ["Bonny", "John", "Ham"] // 배열 값을 정렬하는 sorted(by: ) 메서드를 통해 함수와 클로저 비교해보기 // 함수 func backwards(first: String, second: String) -> Bool { return first > seco..

🔥 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..

리액트 시작 전 준비사항 node.js 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) node.js를 위한 패키지 매니저(버전, 의존성 관리 및 편하게 삭제할 수 있도록 도와주는 역할) React란? A JavaScript library for building user interfaces *라이브러리: 자주 사용되는 기능들을 모아서 정리해둔 모음집(문자열 관련 기능, 숫자 관련 기능, ...) => UI 라이브러리이다. 프레임워크 vs. 라이브러리 React Vue 라이브러리(도구) 프레임워크(메뉴얼) 개발자가 필요한 부분만 찾아서 사용 흐름 제어 권한을 프레임워크가 가짐 리액트의 장점 - 빠른 업데이트와 랜더링 속도 * Virtual D..

웹개발 프로젝트를 진행하기 위해 자바스크립트를 공부하기 전 리액트를 먼저 공부하기로 했다 리액트 공부 전 최소한의 필요 지식을 요약해서 정리해봤다 💡 리액트 공부 전 알아야 할 기본 지식 HTML, CSS SPA란? Java Script(ECMAScript)