Front-End/React.js15 Component의 특징 캡슐화 Component는 메인 어플리케이션과 완전히 분리되어 작성되어져야 한다. -> 재사용, 테스트 가용성, 신뢰성 (Component 수정시, 어플리케이션의 나머지 부분에 영향을 미치는 것을 신경쓰지 않아도 된다.) 확장성 + 재사용성 Component는 확장이 가능해야 한다. (DOM객체처럼) -> 이미 있는 기능 다시 사용 용이 결합성 컴포넌트의 조합으로 하나의 어플리케이션을 만들 수 있다는 점이 있다. 클래스형컴포넌트와 함수형 컴포넌트 (1) 클래스형 컴포넌트 -> state를 넣을 수 있다. -> props 를 입력으로 받는 생성자(constructor) 를 사용하는것이 좋다. ( super() 호출, 생성자 안에서 props호출: super(props) .. 2022. 5. 1. React의 특징 Virtual DOM (추상적개념) -> 데이터를 업데이트하면 전체 UI 를 Virtual DOM에 리렌더링한다. -> 이전 Virtual DOM 에 있던 내용과 현재 내용을 비교한다. -> 바뀐 부분만 실제 DOM 에 적용한다. : DOM 업데이트를 추상화함으로써 DOM 처리 함수를 최소화하고 효율적으로 진행한다. ( DOM: 문서 객체 모델- HTML, XML 문서를 처리하는 API ->문서의 구조적 형태를 제공해서 자바스크립트와 같은 스크립트 언어를 사용해서 문서 내용과 시각적 표현을 수정할 수 있다.) Component-Based 컴포넌트 기반으로 작업하면 UI를 독립적으로 재사용할 수 있다. -> 프로젝트 내에서 어디든지 사용할 수 있고, 수정이 용이하다. JSX (Javascriptxml)(J.. 2022. 5. 1. React routing 방법 요약 페이지 라우팅 방법 header, body, footer 중 라우팅 하고자 하는 곳에 (라우팅되는 대상) import 추가 import { BrowserRouter, Route } from "react-router-dom"; import LoginPage from '../../containers/loginPage/LoginPage'; 코드 추가 // 만약, Route경로가 여러개라면 import 에 Switch 컴포넌트 추가, 컴포넌트로 감싸기. 버튼으로 이동 시, Sign up 과 같이 href="경로" 적어주기. Ref. 모달 로그인 참고 페이지 https://material-ui.com/components/dialogs/ -> form dialog 사용 2022. 5. 1. React Life Cycle API React Life Cycle API 컴포넌트가 브라우저에서 나타날때, 사라질때, 업데이트될때 호출되는 API contructor -> 컴포넌트 생성자 함수 componentDidMount -> 컴포넌트가 화면에 나타났을 때 호출 -> DOM 을 사용해야하는 외부 라이브러리 연동 -> 해당 컴포넌트에서 필요한 데이터를 요청 (Ajax 요청) -> DOM 의 속성 읽기, 변경작업 (스크롤 설정, 크기읽어오기..) componentWillReceiveProps (= UNSAFE_componentWillRecieveProps()) -> 컴포넌트가 새로운 props 를 받았을 때 호출 -> state가 props에 따라 변해야하는 로직 작성 -> 새로받을 props: nextProps -> 업데이트 전 prop.. 2022. 5. 1. React arrow fucntion 화살표 함수 const add2 = (x,y) => { x+y; } 화살표 함수에서는 함수 선언 대신, => 기호로 함수 선언한다. return할 식을 바로 적어주면 된다. 함수의 매개변수가 하나라면, ( ) 도 생략할 수 있다. 익명함수이다. 2022. 5. 1. React 이벤트 핸들링 이벤트 -> 유저가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 onChange(): Form 요소는 값이 바뀔 때 실행 onMouseover(): 버튼에 마우스 커서 올렸을 때 onClick(): 클릭 input요소 여러개 이벤트 핸들링 -> 메소드를 여러 개 만듬 -> event 객체 활용 = e.target.name값 사용 (1) 이벤트에 실행할 Js코드가 아닌, 함수 형태의 값 전달 -> 화살표 함수 문법으로 함수를 만들어 바로 전달 -> render() 렌더링 외부에 미리 만들어서 전달 (2) DOM 요소에만 이벤트 설정가능 -> DOM 요소: div, button, input, form, span... -> 직접 만든 컴포넌트에 전달X = 이름이 onClick인 props를 전달하는 것 /.. 2022. 5. 1. 이전 1 2 3 다음