본문 바로가기

전체 글218

라우팅 리액트 라우팅 대표적인 라우팅 패키지 설치 npm i react-router-dom 코드 작성 import { BrowserRouter, Route } from 'react-router-dom'; import About from './pages/About'; import Home from './pages/Home'; import Profile from './pages/Profile'; function App() { return ( ); } export default App; Route 컴포넌트에 Path와 Component를 설정하여 나열 BrowserRouter 로 Route들을 감싸줌 브라우저에서 요청한 경로에 Router의 path가 들어있으면 해당 component를 보여준다. 문제 결과를 보면 .. 2021. 9. 26.
[NGINX] EC2서버에 HTTPS 설정 이거 우리서버는 apt-add ....xxx 이게 안된다. yum으로 사용해야한다. YUM epel 저장소 추가 yum install epel-releasecertbot 설치 yum install certbot일반 서버일 경우 443 포트 방화벽 오픈 (우리는 사용 x) 아래 방식처럼하지만 우리는 AWS에서 인바운드 설정을 통해 443포트를 열어줄 수있다. firewall-cmd --permanent --add-service=https firewall-cmd --reload //not found 가 뜨면 설치 yum install firewalld systemctl unmask firewalld systemctl enable firewalld systemctl start firewalldnginx sto.. 2021. 9. 25.
컴포넌트 class 컴포넌트 function 컴포넌트 //정의 1 function FunctionComponent(){ return hello; } // 사용 ReactDOM.render(, document.querySelector("#root")) //정의 2 const FunctionComponent = () => Hello; // 사용 2 ReactDOM.render(, document.querySelector("#root")) React.createElement로 컴포넌트 만들기 // React.createElement( // type, //태그 이름 문자열 | 리엑트 컴포넌트 | React.Fragment // [props], //리엑트 컴포넌트에 넣어주는 데이터 객체 // [...children] //.. 2021. 9. 24.
라이프사이클 Life Cycle props / state에서 re render 되지 않게 조절 할 수 있음 CompenetWillReceiveProps props를 새로 지정했을 때 바로 호출됨 state변경에는 반응x props값에따라 stat변경을 원하면 setState를 이용해 state를 변경한다. 다음이벤트로 가는것이 아니라 한번에 변경됨 shouldComponentUpdate props만 변경되어도 state만 변경되어도 props & state 둘다 변경되어도 newProps와 new State를 인자로 해서 호출 return type 이 boolean 임 ture 면 render false 면 render가 호출 x 디폴트는 true compoentWillUpdate 컴포넌트 재 랜더링 되기 직전에 불.. 2021. 9. 23.
반응형