코딩 일기장

리액트에서는 컴포넌트에도 ref를 달 수 있다. 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용한다. {this.myComponent=ref}} /> 이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근할 수 있다. import React, { Component } from 'react'; class ScrollBox extends Component { scrollToBottom = () => { const { scrollHeight, clientHeight } = this.box; this.box.scrollTop = scrollHeight - clientHeight; }; render() { const style = { border: '1px solid black',..

ref를 사용하는 방법은 두 가지가 있다. 콜백 함수를 통한 ref 설정 ref를 만드는 가장 기본적인 방법. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달 받는다. 내부 함수에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 준다. {this.input=ref}} /> 이렇게 하면 this.input은 input 요소의 DOM을 가리킨다. ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. createRef를 통한 ref설정 ref를 만드는 또 다른 방법은 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것이다. 이 함수를 사용해서 만들면 더 적은 코드로 쉽게 사용할 수 있다. import Re..

리액트 컴포넌트 안에서도 id를 사용할 수 있지만 JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 그대로 전달된다. 하지만 특수한 경우가 아니면 사용을 권하지 않는다. 같은 컴포넌트가 여러번 사용되는 경우 HTML에서 DOM의 id는 유일해야하는데 중복된 id를 가진 DOM이 여러 개 생기니 잘못된 사용이다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 문제가 발생하지 않는다. DOM을 꼭 직접적으로 건드려야 할 때 ref를 사용한다. .success { background-color: lightgreen; } .failure { background-color: lightcoral; } import React, { Component } from 'react'; i..

사용자가 웹 브라우저에서 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는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로..

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