Jini Dev

React : Hook (React 기본 Hook : useState, useEffect)

Hook 컴포넌트 내에서 상태(State)나 생명주기(Lifecycle) 기능을 사용할 수 있게 해주는 함수(원래 클래스형 컴포넌트에서만 쓸 수 있었던 React의 핵심 기능인데, 함수형 컴포넌트에서도 이런 기능을 사용할 수 있도록 React 16.8 버전 부터 도입되었다)=> 코드의 재사용성과 가독성을 높여준다. 사용 규칙- 함수형 컴포넌트 최상위 레벨에서만 호출해야한다. (반복문, 조건문, 중첩문 등 함수 안에서 사용할 수 없다)- 컴포넌트 또는 커스텀 Hook 내에서만 호출할 수 있다.- 커스텀 훅 지정 시 : Hook의 이름은 반드시 `use` 로 시작하며 use 뒤에는 대문자로 시작해야한다. Hook의 종류1. 기본 훅React에서 기본적으로 내장된 훅이다. 1. useState2. useEff..

React : 클래스형 컴포넌트와 훅의 등장 이유

클래스형 컴포넌트 클래스 문법으로 구현한 컴포넌트클래스의 멤버 변수로 state로 정의 하고 render라는 멤버 함수에서 반환한 값이 화면에 그려졌다. 클래스형 컴포넌트가 되기 위해서는 react의 Component를 상속 받아야 한다. 예시import React from 'react';export default class ClassComponent extends React.Component { state = { value: 0, // 여기서도 초기화 가능 }; constructor(props) { super(props); this.state = { value: 0, // 여기서도 초기화 가능 }; } resetValue() { // reset 버튼 동작을 ..

React : 컴포넌트와 Props, State (+ useState 훅)

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

요구사항구구단을 2~9단 출력한다단, 5단은 제외한다홀수 단은 다른 색으로 표시한다.구구단은 오른쪽으로 나열되게 한다.const num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; {/* 여기에 JSX를 활용하여 요구사항에 맞게 구구단을 완성시켜보세요! */} 풀이function list(a) { return ( {num.map((i) => { return {`${a} X ${i} = ${a * i}`}; })} );} {list(2)} {list(3)} {list(4)} {list(6)} {list(7)} {list(8)} {list(9)} 정답 코드 {num.map( (n) =>..

JSX 문법JSX : JavaScript + XMLJS 확장 문법이다. HTML 모양에 가까운데 내부적으로 JavaScript를 사용할 수 있다.React 는 JSX를 이용해서 컴포넌트를 작성한다. 1. 최상위 부모 요소는 1개로 단일해야한다. Hello, world!2. 함수의 실행문이나 값을 작성할 때에는 {} 를 사용한다const name = 'lala' {name} // lala 3. 주석 작성은 {/**/} 으로 한다. (한줄 작성은 없다) {/* 주석입니다. */} {name} 4. 모두 닫힘 태그를 사용한다.5. 태그의 속성 이름이 HTML과 다르다- 클래스 속성은 className으로 표기한다- for 속성은 htmlFor 으로 표기한다- onclick 속성은 ..

React사용자 인터페이스를 만들기 위한 JS 라이브러리웹 개발을 쉽게 할 수 있도록 도와주는 라이브러리 => 사용자 인터페이스를 독립적인 컴포넌트 단위로 만들어 재사용성과 유지보수성을 높여주는 JS 라이브러리 프레임워크 : 개발을 위한 기본 틀, 뼈대라이브러리 : 개발에 필요한 도구 또는 집합 왜 React 인가?1. 굉장히 많이 사용해서 수요가 많고 방대한 생태계이다.2. SPA 개발에 적합하다. (SEO에 좋다)3. 화면을 여러 단위로 쪼개고, 재사용하는 식으로 코드 관리가 유용하다.4. 유용한 라이브러리들이 많다.React 이전 웹 서비스의 동작 방식 (MPA) Multiple Page Application여러 페이지로 구성되어 있고 페이지 이동시에 서버에서 새로운 HTML을 받아오는 형식이다.페..