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; 대..

Condition Rendering? 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 Rendering하는 것을 의미합니다. 삼항연산자를 사용하여, 해결하는 것이 가능합니다. function App() { return ( ); } Hello.js function Hello({name, color, isSpecial}) { return {isSpecial ? * : null} 안녕하세요. {name} } export default Hello;

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..

React Hooks class없이, state를 사용할 수 있는 새로운 기능이다. 필요한 이유? - React는 주로 Class Component를 다루기 위해서 사용되었지만, React Hooks는 Functional Component를 위해서 사용함. React Components class Components - 더 많은 기능 제공, 더 긴 코드, 복잡한 코드 및 더딘 성능 Functional Components - 더 적은 기능 제공, 짧은 코드 양, 더 심플한 코드, 더 빠른 성능 But, React 16.8 Hooks가 업데이트 되면서 발전하면서, 다양한 기능도 Functional Components에서 사용 가능. HOC(Higher Order Components) 란? 화면에서 재사용 가..