React22 [배포] 리액트&타입스크립트 로또 추첨기 개인 프로젝트 깃허브에 배포 github page 배포하는 방법 이미 프로젝트를 깃허브 저장소에 올려놓은 상태 여서 앞부분은 생략했지만 간단하게 순서를 짚어보자면, 깃허브에 프로젝트 저장소를 만든다 프로젝트에 깃을 설치하고 프로젝트를 깃허브에 push 해준다 그리고 아래의 순서대로 프로젝트를 배포해준다 1. 프로젝트에 gh-pages 패키지 설치 // 터미널에 아래의 코드를 입력해 gh-pages 패키지를 설치 해준다 npm install --save gh-pages 2. 설치가 완료되면 프로젝트에 있는 package.json 파일을 열어 "homepage" 주소를 추가해준다. "homepage": "http://깃허브주소.github.io/프로젝트저장소명", 3. package.json 파일의 scripts 요소에 아래 코드를 추.. 2022. 6. 10. 리액트[기초] 라이프사이클 메서드 모든 리액트 컴포넌트에는 라이프 사이클(수명주기)이 존재하는데 컴포넌트의 수명은 페이지 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이 난다 라이프사이클 메서드란 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다 클래스형 컴포넌트에서만 사용할 수 있으며 함수 컴포넌트에서는 사용할 수 없다(대신 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다) 이 메서드 들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용하다 라이프사이클 메서드의 종류는 총 9가지이다 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다 이 메서드들은 컴포넌트 클래스에서 덮어써 선언.. 2022. 5. 29. 리액트[기초] Hook 훅 [참고] https://ko.reactjs.org/docs/hooks-intro.html Hook 이란? 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안 된다 오직 React 함수 내에서 Hook을 호출해야 한다 Hook을 일반적인 JavaScript 함수에서 호출하면 안 된다 리액트 내장 훅 API 기본 Hook useState useEffect useCon.. 2022. 5. 28. 리액트[기초] state state 란? 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다 클래스형 컴포넌트가 지니고 있는 state와 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state가 있다 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다 클래스형 컴포넌트 state ( state 초기값 설정 방법 1) 컴포넌트에 state의 초기값을 설정할 때는 constructor 메서드(컴포넌트 생성자 메서드)를 작성하여 설정한다 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해주어야 한다. (이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해준다) 컴포넌트의 state는 객체 형.. 2022. 5. 27. 리액트[기초] propTypes propTypes 이란? 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다 propTypes 지정하는 방법 1. 코드 상단에 prop-types를 import 해준다 2. 컴포넌트에서 설정해준다(설정한 값은 전달될 때 무조건 설정한 형태로 전달되어야 한다) // 자식 컴포넌트 import PropTypes from 'prop-types'; const MyComponent = ({ name, children }) => { 생략.. } MyComponent.defaultProps = { name: '기본 이름' }; // name 은 무조건 문자열(string)형태로만 전달해야된다 MyComponent.propTypes = { name: PropTypes.string }; exp.. 2022. 5. 27. 리액트[기초] 비구조화 할당 문법(구조 분해 문법) | 배열 비구조화 할당 비구조화 할당(destructuring assignment) 문법 이란? props 내부 값을 바로 추출하는 방법을 말한다 객체에서 값을 추출하는 문법으로 구조 분해 문법 이라고도 한다 함수의 파라미터 부분에서도 사용할 수 있다 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용한다 /* 기존 방법 */ // 자식 컴포넌트 const MyComponent = (props) => { return( // 안녕하세요, 제 이름은 기본 이름 입니다. 안녕하세요, 제 이름은 {props.name} 입니다. // children 의 값은 리액트 입니다. children 의 값은 {props.children} 입니다. ; ); }; // 부모 컴포넌트에서 props 값을 따로 지정 하지 않았을때 보여줄 .. 2022. 5. 27. 이전 1 2 3 4 다음 728x90
