WEB/REACT5 [REACT] 변수를 사용한 JSX 조건부 (IF문) 렌더링 JSX(JavaScript + Xml) 내부에서는 if문을 쓸 수 없다. 쓸 수 있는 방법은 1. 삼항 연산자 사용 2. and 연산자 사용 3. 즉시발동함수 사용 이다. 1) 삼항 연산자 사용 가장 보편적으로 사용되는 방식이다. 조건 ? true일(조건을 만족할) 때 실행할 것 : false일 때 실행할 것 의 문법이다. import React from 'react'; const Hello = () { const yes = 1212; return ( yes === 1212 ? 보여줄 내용 : null ); } export default Hello; false일 경우 아무것도 안 보여주고 싶다면 null, 다른 걸 보여주고 싶다면 그걸 넣으면 된다. 이때 백엔드 내용을 변수로 받아올 때는 {}로 감싸줘야.. 2022. 3. 20. [REACT] 부모 컴포넌트로 자식 컴포넌트의 state 전달 자식과 부모 간 데이터 전달 관련 포스트는 많은데, 자식에서 부모로 전달할 때 useState를 부모에 쓰는 방법이 대부분이라 한참 찾다가 글을 쓰게 되었다. pagination을 구현하면서, 다른 페이지 버튼을 클릭하면 현재 페이지가 변화해야 하고, 변화할 때마다 재렌더링을 해야 현재 페이지가 변화한 것을 바로 시각화할 수 있다. 그런데 부모 컴포넌트에 state가 있으면 상태는 변화해도 뷰에 반영이 바로바로 안 되기 때문에 useState 함수는 자식 컴포넌트에 있으면서 자식 컴포넌트에서 변경된 상태를 부모 컴포넌트에 전달해 주어야 함 을 구현해야 했다. 부모 컴포넌트 import React from 'react' function MainPageList() { // 다른 코드 생략 // places에.. 2022. 3. 14. 지도, 우편주소, 구글로그인, 이미지 삽입, 토큰 로그인, 페이지네이션, qr 인식 관련 api 링크 모음 지도 api 사용법 (해당 위치 지도에 표시하는 법) 구글맵 사용하기 Api 인스톨해서 마커 찍기 화면에 구글맵 띄우고 dotenv로 키 숨기기 dotenv 사용법 마커 렌더링 현재 위치로부터의 거리 현재 위치 받아오기 우편번호 주소 api 실제사용렌더링 구글로그인...일반로그인... 구글로그인 구글로그인 버튼 만들기 공식문서 뭔가 자세한듯한 영어문서 토큰으로 로그인 유지하는 법 1 로그인 처리 이미지 삽입하는 방법 페이지네이션 qr 인식 큐알코드 스캔 공식문서 2022. 2. 16. Progressive Web Apps (PWA) Progressive Web Apps (PWA) 트위터가 사용 중, google keep이 대표적인 pwa 사용 구글 서비스 구글이 개발함 웹으로 개발, URL 접속 및 앱처럼 홈아이콘 추가해서 사용 가능. 카메라 접근, 푸시 알림 등 네이티브 기능 일부 사용 가능 캐싱을 통한 오프라인 사용 가능. 반응형 개발 앱보다 속도 빠름 리액트로 개발 가능 - CREATE REACT APP DOC, REACT로 PWA 만들기, 잘 됐는지 개발자도구에서 체크 PWA 자체는 앱스토어 배포 불가능하지만 개발 다 끝내고 하이브리드 앱으로 감싸서 스토어에 배포 가능한 듯? - DO IT 프로그레시브 웹앱 만들기 참고 깃헙 PWA Examples 2022. 2. 16. [REACT] REACT 시작하기 & JSX 먼저 구글에 nodejs 서치해서 가장 최신 버전 다운로드하기. 원하는 폴더에 가서 터미널에 npx create-react-app 프로젝트명 으로 리액트 프로젝트 생성 npm start로 웹페이지 열 수 있음 (기본 설정에 따르면 localhost:3000에서 열림) 여기까지 하면 기본 세팅이 완료된다! src/index.js는 src/App.js의 함수형 컴포넌트에서 return 안에 있는 html을 public/index.html에 넣으라는 역할. id가 root인 div태그에 app.js에 있는 걸 다 넣음. 그래서 렌더링된 걸 볼 수 있음. =App component는 함수로 만들어져있음. 그리고 default로 export 돼있음.(export default App;) 이걸 index.js에서 .. 2021. 10. 3. 이전 1 다음
