ref: DOM에 이름 달기 리액트에서는 HTML의 요소인 id를 사용할 수 없다. 왜냐하면 id는 고유한 값인데 컴포넌트를 여러 번 사용할 경우 id의 고유성을 잃기 때문이다. 하지만 그렇다고 id 자체를 사용하지 못하게 된다면 그것 또한 문제이기 때문에 리액트에서는 ref라는 기능을 사용한다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위와 같은 문제에 대처 가능하다. 이렇게 id처럼 쓸 수 있으니 다른 라이브러리나 프레임워크와 함께 잘 사용이 가능하다. 그렇다면 ref는 언제 사용하면 좋은걸까? DOM을 꼭 직접적으로 건드려야 할 때 입니다. 보통은 아래와 같은 경우에 자주 사용된다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 ..
import React, { Component } from "react"; class EventPractice_class extends Component { state = { username: "", message: "" }; handleChange = e => { this.setState({ [e.target.name]: e.target.value }); }; hendleClick = () => { alert(this.state.username + " : " + this.state.message); this.setState({ message: "", username: "" }); }; render() { return ( 이벤트 연습 확인하기 ); } } export default EventPractic..
State 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모컴포넌트에서 바꿔줘야 합니다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다. 클래스형 컴포넌트의 state 새로운 컴포넌트를 만들어 다음과 같이 코드를 작성해 보세요. import React, { Component } from "react"; class Counter extends Component { c..
컴포넌트란? 컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수형 컴포넌트이며, 다른 하나는 클래스형 컴포넌트입니다. 클래스형 컴포넌트와 함수형이 어떻게 구성되어 있는지 다음 코드로 살펴봅시다. import React from "react"; import "./App.css"; function App() { const name = "리액트"; return {name}; } export default App; import React, { Component } from "react"; class App extends Component { render(){ const name = "react"; return {name}; } } export default App; 두 코드의 역할은 똑같습니다. 다만 클래스..
JSX란? 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 예를 하나 들어봅시다. function App(){ return{ Hello react }; } 이렇게 작성된 코드를 다음과 같이 변환됩니다. function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } 만약 컴포넌트를 랜더링할 때마다 JSX 코드를 작성하는 것이 아니라 위와 같은 코드로 매번 React.createElement를 호출해야 한다면 매우 불편할 ..
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위와 같은 코드는 리액트 프로젝트를 처음 실행했을 때 src/App.js에서 볼 수 있는 코드다. 나와 같이 리액트를 처음 접하는 사람들은 생소한 코드다. 이제부터 하나씩 이 코드들을 이해해 볼 것이다. import React from 'react' 이 코드는 리액트를 불러와서 사용할 수 있게 해줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성이 되는데, 프로..