Jini Dev

요구사항카드가 접히고 열리는 것을 구현한다 (아코디언 컴포넌트 구현)카드가 접혔을 땐 제목 우측에 '+' 를 열렸을 땐 '-' 가 표시 되도록 한다기본 스타일 코드와 App.js 는 구현되어있다.// App.js - Accordion 부모 컴포넌트import Accordion from './test/toggle/Accordion';function App() { return ( );}​라이프사이클을 생각해보면서 구현 해보기 :React : Lifecycle(라이프 사이클) - 클래스형 컴포넌트 vs 함수형 컴포넌트 React : Lifecycle(라이프 사이클) - 클래스형 컴포넌트 vs 함수형 컴포넌트React : 클래스형 컴포넌트와 훅의 등장 이유 React : 클래스형 컴..

React : 클래스형 컴포넌트와 훅의 등장 이유 React : 클래스형 컴포넌트와 훅의 등장 이유React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.com클래스형 컴포넌트의 lifecycle 1. 마운트(mount) : 컴포넌트가 실행(생성)될 때 construnctor > getDerivedStateFromProps > render > componentDidMount 클래스의 constructor 실행getDerivedStateFromProps 메소드 실행..

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseCallback 컴포넌트에서 최초 렌더링 시 특정 함수를 기억했다가 리렌더링 할 때 재활용 하는 훅이다.- 메모이제이션 하고 싶은 함수를 콜백 함수로 작성한다.=> 리렌더링이 발생해도 내부의 함수는 여러번 생성하지 않는다.- 의존성 배열(dependency list)의 값에 따라 useCallback 내부 로직의 실행 조건을 적용 할 수 있다. 1. 의존..

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있게 해주는 훅이다.- 실행하고 싶은 작업을 콜백 함수로 작성한다.- return 은 clean-up 함수를 필요한 경우 작성한다.- 의존성 배열 (dependency list)의 값에 따라 useEffect 내부 로직의 실행 조건을 적용할 수 있다. 1. 의존성 배열이 없는 경우 : 매 랜..

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseState 컴포넌트 내에서 상태(state)를 관리할 때 사용하는 훅이다.- useState 함수의 인자로 state의 초기 값을 지정한다.- state(상태 값)과 setState(상태 값을 변경하는 함수)를 배열로 반환한다.import React, { useState } from 'react'; // useState importexport default..

gh-pages React 를 배포해야하는데 파일을 직접 업로드 하는 방법 말고 배우질 않아서...! 인프런 강의를 보다가 gh-pages 라는 거로 배포할 수 있다는 사실을 알게 되었다!엄청 편리하다 gh-pages는 요거다https://www.npmjs.com/package/gh-pages gh-pagesPublish to a gh-pages branch on GitHub (or any other branch on any other remote). Latest version: 6.3.0, last published: 4 months ago. Start using gh-pages in your project by running `npm i gh-pages`. There are 1121 other pro..

React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/75" data-og-url="https://jini-dev.tistory.com/75" data-og-image="https://scrap.kakaocdn.net/dn/E9uEx/hyYPc17D81/63lp2fhJSPPcQ4KsAkiDg1/img.png?width=800&height=420&face=0_0_800_420,https:..

React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/75" data-og-url="https://jini-dev.tistory.com/75" data-og-image="https://scrap.kakaocdn.net/dn/E9uEx/hyYPc17D81/63lp2fhJSPPcQ4KsAkiDg1/img.png?width=800&height=420&face=0_0_800_420,https:..

컴포넌트란?- 스스로 상태를 관리하는 캡슐화된 코드 조각=> 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본적으로 함수이기 때문에 자신만의 고유한 로직이 들어갈 수 있다. 함수 형태로 컴포넌트를 만들게 되면 함수 스코프에 의해서 외부와 내부 스코프가 나눠지기 때문에- 스스로 상태(state)를 가질 수 있다.- 컴포넌트는 명확한 범위와 의미를 가질 수 있도록 파일을 분리한다=> 각각 개별의 파일로 나눈다. - 최상위 컴포넌트의 이름은 암묵적으로 App이다.=> 루트 컴포넌트- 최상위 컴포넌트(App)을 렌더링 하는 코드는 index.js에 둔다.=> 엔트리 포인트Props 부모 컴포넌트에서 자식 컴포넌트..

ESLint문법 및 코드 스타일을 검사해주는 도구 - 문법적인 오류를 사전에 발견할 수 있다.- 협업에서 통일된 코드 스타일을 유지할 수 있도록 도와준다 ❗Lint 는 여러가지가 있다. 1. CRA (create-react-app) 에서 설정 방법cra 설치시 기본적으로 내장되어 있기 때문에 package.json 에 "eslintConfig" 안에서 설정한다."eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 2. 별도의 파일로 적용하기root 경로(package.json 과 동일한 경로)에 .eslintrc.json 파일을 생성한다.json 형태로 코드를 작성한다.{ "extends": ["react-a..