state 동적인 데이터를 다룰 때는 state라는 개념을 사용한다. 빠르게 예시를 통해 넘어가보자. import React, { Component } from 'react';class Counter extends Component { state = { number: 0 }; handleIncrease() { } handleDecrease() { } render() { return ( 값 올려보기 값: {this.state.number} + - ); }}export default Counter;새로운 컴포넌트를 하나 생성해보자. state 객체 안에는 number가 0으로 기본적으로 할당되어있다. 값을 증가시켜주는.. 2024. 12. 8. props 리액트 컴포넌트에서 다루는 데이터이자, 가장 중요한 props를 정리하겠다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값을 의미한다. 자식은 이를 받아오기만 하고 수정할 수 없다. 클래스형 컴포넌트 생성import React, { Component, Fragment } from 'react';import './App.css';class App extends Component { sayResult(name) { if (name === 'c') return '한 글자'; if (name === 'cs') return '두 글자'; if (name === 'csd') return '맞음'; } render() { const name = 'csd'; return ( .. 2024. 12. 5. JSX - style과 주석 앞서 다룬 JSX 문법의 마지막을 정리해보려고 한다. Style - 객체 활용기본적인 CSS를 활용한 스타일은 이미 익히 들어왔다. 리액트에서는 조금 다르게 스타일을 적용할 수 있다고 하는데 확인해보자. import React, { Component, Fragment } from 'react';class App extends Component { sayResult(name) { if (name === 'c') return '한 글자'; if (name === 'cs') return '두 글자'; if (name === 'csd') return '맞음'; } render() { const name = 'csd'; return ( 리.. 2024. 12. 5. var, let, const 자바스크립트를 한 번이라도 사용해보았더라면 변수 선언에서 var, let, const를 본 적이 있을 것이다. 셋의 차이를 조금 명확히 기록해 남겨두려고 한다. 자바스크립트를 ES6 기준으로 ES6 이전에는 var를 많이 사용하였고 let, const ES6 이후로 사용되어지는 변수 선언식이다. 일반적으로는 var는 이제 쓰지말고 let, const를 쓰자!로 시작하여 let은 변할 수 있는 수, const는 변하지 않는 상수로 사용하자! 라고 들어보았을 것이다. 뭐.. 나도 이렇게 알고는 있지만 육안으로 확인해보고 싶었다. function test() { var a = 10; if (true) { var a = 20; console.log(a); } con.. 2024. 12. 5. JSX - JSX가 무엇인지와 규칙 그리고 간단한 값 넣어보기 Babel · BabelThe compiler for next generation JavaScriptbabeljs.io앞서 babel이라고 하는 자바스크립트로 변환해주는 도구를 확인해보겠다. ( Welcome to React To get started, edit src/App.js and save to reload. )이와 같은 형태의 코드들을 보면 흔히 HTML 같아 보일 수도 있다. 하지만 이건 자바스크립트이다. import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";/*#__PURE__*/_jsxs("div", { className: "App", children: [/*#__.. 2024. 11. 27. DOM 리액트를 공부해보기 전에 DOM이라는 구조를 전부터 이해해보고 싶었고 찍어보기 시작하면서 리액트에서는 Virtual DOM이라는 걸 사용해 변화에 맞게 바꾸어주는 것을 알게 되었다. DOM이 그래서 뭔데?브라우저가 HTML 문서를 이해할 수 있도록 만든 거라고 생각하면 된다. 이런 태그로 웹 페이지가 만들어지면 브라우저는 이를 DOM이라는 트리 구조로 변환하게 된다. 트리라는 것은 이미 어떤 것인지 따로 알고 있긴하지만 간략하게 요약하면 다음과 같다. 가장 최상위에 존재하는 루트가 있고 그에 대한 자식 노드들로 이어져 있으며 이 때 자식 노드와 연결된 노드는 부모 노드라고도 부른다. 가장 최하위 단의 노드의 경우에는 자식 노드가 없을 것이고 이는 리프 노드라고도 한다. 즉, 흔히 알고 있는 태그들이 .. 2024. 11. 27. 이전 1 2 3 다음