코딩 일기장

사용자가 웹 브라우저에서 DOM element 와 상호작용하는 것을 이벤트라고 한다. 리액트 이벤트 시스템 리액트의 이벤트는 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하다. 주의 사항 이벤트 이름은 카멜 표기법으로 표기 이벤트를 실행할 자바스크립트 코드를 전달X, 함수 형태의 값을 전달 DOM 요소에만 이벤트를 설정할 수 있다. 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection onChange 이벤트 import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 { console.log(e.target.va..

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔줘야한다. 클래스형 컴포넌트의 state Counter.js import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { number: 0, }; } render() { const { number } = this.state; // state를 조회할 때는 this.state로 조회 retu..

props props는 properties의 줄인 표현, 컴포넌트 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. JSX 내부에서 props 렌더링 import React from 'react'; const MyComponent = (props) => { return 안녕하세요. 저는 {props.name} 입니다.; }; export default MyComponent; 컴포넌트를 사용할 때 props 값 지정 import MyComponent from './MyComponent'; class App extends Component { render() { return ; } } export default App; props 기본값 설..

클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 함수형 컴포넌트 import './App.css'; function App() { const name = '리액트'; return {name}; } export default App; 클래스형 컴포넌트 import { Component } from 'react'; class App extends Component { render() { const name = '리액트'; return {name}; } } export default App; 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메..

감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함 function App() { return ( 리액트 안녕!! ) } export default App; 와 같이 요소들을 하나로 감싸지 않으면 안됨 function App() { return ( 리액트 안녕!! ) } export default App; 와 같이 부모 요소 하나로 감싸야 함 why? Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 리액트 v16이상부터는 대신 라는 기능을 사용하면 됨 import { Fragment } from 'react'; function App() { return ( 리액트 안녕!! ) ..

App.js 코드 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; import 다른 파일들을 불러와서 사용 모듈을 불러와서 사용하는 것은 브라우저에는 없던 기능 번들러 브라우저에 없는 기능을 사용하기 위해 파일들을 묶듯이 연결하는 것 ex) 웹팩, Parcel, browserify 리액트에서는 주로 웹팩 사용 JSX JSX는 자바스크립트의 확장 문법 XML과 매우 비슷하게 생김 JSX는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로..

문제 링크 : https://www.acmicpc.net/problem/2146 문제 여러 섬으로 이루어진 나라가 있다. 이 나라의 대통령은 섬을 잇는 다리를 만들겠다는 공약으로 인기몰이를 해 당선될 수 있었다. 하지만 막상 대통령에 취임하자, 다리를 놓는다는 것이 아깝다는 생각을 하게 되었다. 그래서 그는, 생색내는 식으로 한 섬과 다른 섬을 잇는 다리 하나만을 만들기로 하였고, 그 또한 다리를 가장 짧게 하여 돈을 아끼려 하였다. 이 나라는 N×N크기의 이차원 평면상에 존재한다. 이 나라는 여러 섬으로 이루어져 있으며, 섬이란 동서남북으로 육지가 붙어있는 덩어리를 말한다. 다음은 세 개의 섬으로 이루어진 나라의 지도이다. 위의 그림에서 색이 있는 부분이 육지이고, 색이 없는 부분이 바다이다. 이 바다..

create-react-app으로 프로젝트 생성하기 create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구 VS Code에서 터미널을 열고 (Git Bash) $ yarn create react-app "프로젝트 이름" 프로젝트 생성이 완료 되었다면 $ cd "프로젝트 이름" $ yarn start

Node.js와 npm https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org yarn https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com git https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git sourc..

리액트? 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용 타 프레임워크가 MVC, MVVM, MVW 아키텍처 구조를 가지는 한편 리액트는 오직 V만 신경씀 컴포넌트 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 정하는 선언체 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념 템플릿이 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데 이와달리 컴포넌트는 좀 더 복잡한 개념 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 함 초기 렌더링 어떤 UI 관련 프레임워크, 라이브러리를 사용하든 맨 처음 어떻게 보일지를..