KalelPark's LAB

useState, Input - useState 라이브러리는 상태관리를 할 때 사용됩니다. const [number, setNumber] = useState(0); { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return( {number} +1 { setText(e.target.value); }; const onReset = () => { setText(""); }; return( 초기화 값: {text} ); } export default InputSample; React 상태에서는 객체를 수정할 때, inputs[name] = value; 대..

JSX란? React에서는 본질적으로 렌더링 로직이 UI 조직에 따라 state가 변하는 방식, 화면에 표시하기 위해 사용됩니다. JSX에서 태그에 style에서는 HTML과 다르게 background-color 가 아닌 backgroundColor로 사용합니다. camelCase를 사용한다고 생각하면 됩니다. function App() { const name = "react"; const style = { backgroundColor : "black", color : "aqua", fontSize : 24, padding : "1rem" } return ( {name} ); } 또한 classname을 설정할 때도, class = 가 아닌, className = 으로 설정해야 합니다. function ..

React 작업환경 구축 Webpack, Babel의 용도? 리액트를 하다보면, Component를 분할하여, 파일로 저장하게 됩니다. Component는 JSX로 작성하게 되는데, JSX를 여러개 결합할 때, Webpack을 사용하게 되고, 새로운 문법들을 활용할 때, Babel을 활용합니다. npx create-react-app begin-react npm run start 혹은 npm install -g create-react-app >> 생성된 파일 접속 npm run start React Component를 만들 때, import React from "react";를 통하여 React를 불러와야 합니다. React Component는 함수 형태 혹은 클래스 형태로 작성할 수 있습니다. impor..

import React, {Component} from "react"; export default class App extends Component { state = { todoData : [ { id : "1", title : "공부하기", completed : true }, { id : "2", title : "책 읽기", completed : false }, { id : "1", title : "과제하기", completed : false } ], value : "" }; btnStyle = { color : "#fff", border : "none", padding : "5px 9px", borderRadius : "50%", cursor : "pointer", float : "right" } g..

this란? 자신이 속한 객체 혹은 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(Self-referenceing)입니다. this는 this가 바라보고 있는 객체이며, 어디서 호출하느냐에 따라 다릅니다. this는 this가 바라보고 있는 객체이며, 어디서 호출하냐에 따라 의미가 다릅니다. (Python의 self와 같다고 볼 수 있습니다.) * this를 실행할 때, 주의할점으로는, this가 결정되는 시점은 this가 선언된 시점이 아닌 누가 실행하는지에 따라서 결정된다는 것입니다. this가 결정되는 시점? this는 부모를 가라키기 때문에, this.birth는 wongi의 birth를 가리키고, 출력된다는 것을 알 수 있습니다. const wongi = { birth : "0628", co..

JSX Key 리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야 합니다. Key는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 됩니다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 합니다. * 주의할 점으로는 Key에는 유니크한 값을 넣어줍니다. (index는 비추천입니다.) index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게됩니다. React State 리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 합니다. React State는 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다. (State가 변경되면 컴포넌트는 리랜..

Webpack 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽다. Webpack의 유래 https://ingg.dev/webpack/ Babel 최신 자바스크립트 문법을 지원하지 않는 브라우저를 위해 최신 자바스크립트 문법을 구형 브라우저에서도 사용 가능하게 변환하는 라이브러리이다. Babel 참고 https://bravenamme.github.io/2020/02/12/what-is-babel/