React.js (6) 썸네일형 리스트형 클론코딩 - 영화 평점 웹서비스 (1) 기본 세팅 1) - 각각 node, npm, npx 순으로 확인해 준다. 2) - 그 다음 vscode를 설치해준다. https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 에 접속하여 최신 버전을 설치해.. UseEffect()에 대해서 useEffect 함수는 리액트 컴포넌트가 렌더딩이 될때마다 특정작업을 실행 될수있게 하는 Hook이다. 기본적으로는 이런식으로 실행이 된다. 1. 컴포넌트가 마운트될때 (처음 사용될때? 처음 렌더링될때) 페이지가 렌더링 될때마다 컴포넌트를 한번만 실행 하고싶다면 deps위치에 빈 배열을 입력하면 된다. 배열을 생략하게되면 리 렌더링될때 실행이된다. 2.컴포넌트가 업데이트될때 #특정 props나 state값이 바뀔때 특정값이 업데이트될때 실행하고 싶을때는 deps 위치의 배열안에 검사하고싶은 값을 넣어준다. 업데이트될때 뿐만아니라 마운트가 될때마다 실행된다. 따라서 업데이트될때만 특정 함수를 실행하고싶다면 이런 식으로 조건문을 주어서 특정값만 실행을 시킬수도있다. 3.컴포넌트가 언마운트될때 (사라질때) .. Class Component-> Function Component 바꾸기 Function 요소로 변환하는 단계 1. 클래스를 함수로 변경 2. 렌더링 방법 제거 render 메소드를 제거한뒤 return를 포함해서 &이후의 모든 항목을 유지합니다. 3. 모든 메소드를 함수형으로 변환 클래스 메소드와 함수형 메소드는 일치하지않기때문에 변경을 해줘야한다. 4. this 함수를 제거한다. 클래스의 this 는 함수형 컴포넌트에서 사용되지않는다. 그래서 제거를 해야한다. 5. 생성자를 제거한다. 5-1 useState 를 사용한다. 5-2 이벤트 핸들러 바인딩 제거한다. 6. this.setState 재배치 this.setState는 함수 구성요소에 더이상 존재하지않습니다. 대신 각 setState호을 관련 상태 변수 setter로 교체해야한다. 7.상태 업데이트의 부작용에 대한 u.. Axios,Fetch 개념정리 Axios 란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 특징 - 폭넓은 브라우저 호환성! - response 할때 json 형식으로 반환 - *XSRF 보호 가능 *XSRF란 => 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(CRUD)를 특정 웹사이트에 요청하게 하는 공격 - 인터셉트 가능! - 라이브러리라서 모듈을 설치하고 사용가능하다! Fetch란? HTTP 요청 전송 기능을 제공하는 WEB API 특징 - HTTP response 객체를 래핑한 Promise 객체를반환해서 데이터 다루기 편하다 - 내장 라이브러리 이기때문에 업데이트 이슈방지 가능하다. - 인터셉터가 불가능 하다. - json형태로 반환하지않아 json형식으로 반환을.. 리액트 기본지식 정보 (2) - 프로퍼티(Props) 프로퍼티 (props) 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향) 프로퍼티는 수정할수없다는 특징이 있다.( 자식입장에서는 읽기전용데이터이다.) - 프로퍼티에 문자열을 전달할때는 큰따옴표("") 를 , 문자열 외의 값을 전달할때는 중괄호({})를 사용한다. 프로퍼티의 자료형, 타입정의 프로퍼티의 자료형을 미리 선언할수있다. 리액트 엔진이 프로퍼티로 전달하는 값을 효율적으로 알수있고, 버그예방에도 도움이 된다. 리액트에서 제공하는 prop-types를 이용하여 각각의 자료형을 선언한면 된다. 기본값 설정 컴포넌트에 props 기본값을 설정하고 싶은경우 defaultprops를 설정하면 된다. 필수값 설정 디폴트 값을 설정을 하지않는경우 해당 프로퍼티를 필수 프로퍼티로 선언할수도있다... 리액트 기본지식 정보 (1) 컴포넌트 Component 리액트 컴포넌트 ( React Component ) - 리액트로 만들어진 어플을 이루는 최소한의 단위 - 기존의 웹 프레임 워크는 MVC방식으로 분리하여 관리하며 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할수있고 이를통해 컴포넌트를 쉽게 만들수있다. 즉 컴포넌트는 데이터 (props)를 입력받아 View(state)상태에 따라 Dom Node를 출력하는 함수 - 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 그 이유는 리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급 하기때문이다. - UI를 재사용 가능한 개별적인 여러조각으로 나누고 각 조각을 개별적으로 나누어 코딩한다. - props이라고 하는 임의의 입력을 받은후 화면.. 이전 1 다음
