훅(HOOK) 이란? https://ko.reactjs.org/docs/hooks-reference.html Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다. 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. (useState, useEffect 등) 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 훅의 규칙 최상위 에서만..

목록 요소들을 반복처리 할때는 map함수를 이용 합니다. 반복 컴포넌트에는 반드시 key props를 전달해야 합니다. map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용 array.map(callbackFunction(currenValue, index, array), thisArg) currenValue: 현재값 index: 현재인덱스 arrayt: 현재배열, thisArg: callbackFunction 내에서 this로 사용될 값 예제 1) IterationComponent.js const IterationComponent = () =>{ //1. 반복처리 const arr = [1,2,3,4,5]; /* const newArr = arr.map(function(item,index,arr..

이벤트 핸들링 이벤트 규칙 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp 이벤트를 전달할 때는 {함수} 형태로 사용합니다 인풋값 핸들링 해보기 인풋의 값이 변화되는 이벤트 onChange 연결 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값) setter를 이용해서 state변경하기 예제 ) 예제 1) 변화하는 인풋 값에 따른 결과값 변경 import { useState } from "react"; const EventComponent = () => { //121p //name을 저장할 useState const [name,setName] = useState(''); //이벤트 함수의 첫번째 매개변수에 이벤트에 대한 정보를 넣어줍니다. ..

책 103p State 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다. 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다. 함수형 컴포넌트에서는 내장함수 훅 Hook개념을 이용해서 클래스형보다 더욱 쉽게 사용 가능 합니다. 함수형 컴포넌트에서는 useState()를 사용합니다. 함수형 컴포넌트 state 훅 나의 첫번째 훅 useState(초기값) useState() : 배열반환 첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter함수) 를 반환합니다. state는 어떤 타입이던 상관 없습니다. (str, number, object) state는 여러개 일 수도 있습니다. state는 ..

https://goddaehee.tistory.com/300 props ( properties 프로퍼티의 줄임말 ) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) 1. 상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수 2. 객체 형태로 전달되기 때문에 {}로 값을 받습니다. 3. props은 읽기전용입니다.(값은 부모에서 바꿔서 전달합니다.) 사용방법 - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 사용방법 1 App.js import { Fragment } from "react"; import MyCom..

https://goddaehee.tistory.com/296 JSX란? - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. ㄴ es6를 es5로 변환 - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. - 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.(주관적인 관점) JSX 문법 1. 주석 alt + shift + a {/* */} 2. return 구문은 반드시 1개여야 합니다. 반드시 하나의 태그를 리턴해야합니다. ex..

html의 컴포넌트 EX) body -> form -> input 리액트의 컴포넌트의 형태 (Tree구조) App/ -> app.js 최상위 컴포넌트 딱 1개만 있어야함 수정시 리랜더링을 하지 않으려고 나눔 https://goddaehee.tistory.com/299 리액트 컴포넌트 - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. - 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. - 컴포넌트 이름은 항상 대..

node.js다운로드 설치 https://nodejs.org/ko/ 계속 next 눌러서 설치! 파일 위치 변경 vscode 들어가서 Open Folder... react 폴더 잡아주기 create-react-app으로 프로젝트 생성하기 vscode에 terminal 들어가서 node -v 입력 프로젝트 시동하기 그리고 생성한 프로젝트로 위치를 바꿔준다. cd react-basic 위치를 바꿔준 후 프로젝트 시동하기! npm start