😎 환경 설정은 중요합니다. 근데 라이브러리를 너무 많이 쓰다보니 처음 환경을 세팅할 때 설치할거나 설정해줘야할 게 너무 많아요 😎 루트 폴더에 .prettierrc파일 생성하기 { "singleQuote": true, "useTabs": false, "trailingComma": "all", "semi": true, "printWidth": 80, "tabWidth": 2 } .prettierrc는 프리티어가 어떻게 동작할지를 지정해주는 역할을 수행합니다. .prettierrc가 있는 폴더는 전역 프리티어 확장보다 우선되어 설정이 적용되는 특징이 있습니다. 쾌적한 개발을 위해서 자동으로 예쁘게 코드를 정렬해주는 프리티어는 작업 생산성을 크게 상승시켜줍니다. 제가 사용하는 prettierrc 설정은 다음..
😎 함수형 컴포넌트와 클래스형 컴포넌트의 차이? 열심히 구글링을 하며 웹서핑을 하던 중 흥미로운 게시글을 발견했습니다. https://overreacted.io/ko/how-are-function-components-different-from-classes/ Dan Abramov이란 redux, Creat React App의 공동저자이신분이 작성한 게시물인데 클래스 컴포넌트와 함수형 컴포넌트의 차이를 좋은 예시를 통해 길게 설명을 해주는 게시물입니다. 단순히 함수형은 라이프사이클 API를 사용할 수 없다거나 hook을 사용한다거나 하는 것이 아닌 명확한 차이를 설명해주어서.. 아주 유익했지만.. 제 머리로는 쉽게 이해하기 힘들었으므로 정리해보겠습니다. 실제 게시물을 읽어보면 CodeSandBox사이트를 ..
🙄 엘리먼트는 뭔데요 리액트 공식 문서에 따르면 엘리먼트는 리액트 앱의 가장 작은 단위를 뜻합니다. 리액트를 공부하다보면 컴포넌트라는 개념을 만나게되는데 엘리먼트는 컴포넌트의 "구성요소"라고 알고 있으면 되겠네요! 엘리먼트가 모여서 컴포넌트가 되는 이미지입니다. 브라우저의 DOM 엘리먼트와 달리 Reach 엘리먼트는 일반 객체이고 쉽게 생성할 수 있으며 리액트 DOM은 리액트 엘리먼트와 일치하도록 DOM을 업데이트 해준다고 합니다. 또한 리액트 엘리먼트는 불변객체입니다. 따라서 엘리먼트를 생성한 이후에는 수정이 불가능해요 그럼 어케 수정함? 새로운 엘리먼트를 생성하고 이걸 root.render()에 전달하는 걸로 업데이트합니다. 🙄root DOM 노드 리액트로 구현된 애플리케이션은 하나의 root D..
🔍함수 컴포넌트에서 useState 사용하기 리액트 16.8이전버전에서는 함수 컴포넌트에서 state를 사용할 수 없었지만 useState함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었답니다. 또한 useState를 사용하는 과정에서 Hooks라는 것을 사용하게됩니다. 🔍useState 사용해보기 import React from "react"; import { useState } from "react"; const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요"); const onClickLeave = () => setMessage("안녕히가세요"..
⚡클래스형 컴포넌트의 state import { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { number: 0, }; } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); }} > +1 ); } } export default Counter; 예제코드입니다. ⚡super(props) class Counter extends Component { constructor(props) { super(props); this.state = ..
⚡컴포넌트의 역할 1. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어줌 2. 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때 사라질 때 변화가 일어날 때 주어진 작업들을 처리할 수 있음 3. 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있음 🔍클래스형 컴포넌트 import "./App.css"; import { Component, Fragment } from "react"; class App extends Component { render() { const name = "react"; return {name}; } } export default App; 이런 식으로 컴포넌트가 이루어져있습니다. 😎함수 컴포넌트와 클래스형 컴포넌트의 차이? 클래스형 컴포넌트는 state기능 , 라이프 사이클..
⚡IF 대신 삼항연산자 function App() { const name = "리액트" return ( {name === "리액트" ? ( 리액트에용 ) : ( 리액트아니에용) } ); } 삼항연산자는 많이 사용하던거라 익숙한데 괄호 표기가 살짝 안익숙하네요 삼항연산자는 조건문이 참일 경우 : 왼쪽에 있는 코드를 실행하고 참이 아닌 경우 : 오른쪽에 있는 코드를 실행합니다. 근데 삼항연산자 자체가 JS문법이다보니 삼항연산자 전체를 {}로 묶어서 처리하는군요 function App() { const name = "리액트" return ( {name === "리액트" ? ( 리액트에용 근데용 ) : 리액트아니에용 } ); } 리턴하는 html 태그가 한줄이면 ()를 생략해도 사용가능하지만 그게 아닌 경우에는..
⚡Fragment import { Fragment } from 'react' function App() { return ( 안녕하세요 ); } Fragment는 리액트 v16이상부터 도입된 기능입니다. Fragment는 무의미한 div사용을 억제해줍니다. 리액트를 사용하게 위해 쓰는 JSX 문법을 사용할 때 return 문 안에 반드시 하나의 최상위 태그가 있어야한다는 규칙때문에 의미없는 div를 만들게 됩니다. 이를 위와 같이 import { Fragment } from 'react'를 통해 Fragment를 import하고 위와 같이 최상위 태그를 로 묶어주는것으로 사용할 수 있습니다. 🔍단축 표현 import { Fragment } from 'react' function App() { return ..
