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) 란? 화면에서 재사용 가..

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가 변경되면 컴포넌트는 리랜..