전체 글57 Container 란? Container도 react 패키지의 Component를 물려받는 컴포넌트의 일종이다. ->Container는 앱의 상태를 관리하기 때문에 앱의 상태가 자주 바뀔수록 그에 따라 빈번하게 업데이트가 일어난다. -> Redux와 소통하면서 앱의 상태를 제어하는 컴포넌트. (예시) 리덕스를 사용할 때에는 특히 Container와 Component를 구분해주는 게 좋다. Container는 앱의 상태를 관리하기 때문에 앱의 상태가 자주 바뀔수록 그에 따라 빈번하게 업데이트가 일어난다. 그래서 필요없는 부분에 업데이트가 일어나지 않게 하려면 Container과 Component를 구분해주어야 한다. 리액트는 컴포넌트 단위로 업데이트를 하기 때문이다. Container가 업데이트되어도 그 아래 Component와.. 2022. 5. 1. 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. 이전 1 2 3 4 5 6 7 8 ··· 10 다음