🍓𝗪𝗲𝗯
-
[React] 파일 쪼갤 때 사용하는 import/export🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 16. 20:02
상황 코딩을 하다가 너무 길 때 다른 곳으로 빼고 싶을 때, 다른 파일에서도 사용하고 싶을 때 내보내기 : export default 함수명/변수명 let name = 'Ahntoday'; export default name 파일 한개당 한번만 가능하다! ✅ 내보낼 변수가 많은데 다른 파일에서 쓸 수 있게 하고 싶다면? let name = 'Ahntoday'; let name2 = 'SeoAn'; export { name, name2 } export {변수1, 변수2} 받아오기 : import 함수명/변수명 from 경로 import name from './data.js'; { name } 가져다가 쓰면 된다! 함수명/변수명 작명해서 사용하면 된다. ✅ 여러개 export한 것을 import해올 때 im..
-
[React] React Bootstrap 사용하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 16. 11:51
설치방법 https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 여기에서 get started를 누르고 설치를 하면된다. 참고로 npm install은 yarn add와 동일하다. yarn add react-bootstrap bootstrap react bootstrap 사이트의 css link 태그 index.html에 복붙한다. 이렇게 쓰는 건 지리적으로 먼 곳에서 불러와서 쓰는 것이기 때문에, 다운받아서 사용하는 방법도 추천된다. 다운받고 css 안에 bootstrap..
-
[React] 클릭시 UI 보였다가 안보였다가 하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 13. 07:24
기존 JavaScript에서는 클릭시 컴포넌트 만들고 보여줬다가 안보여줬다가 하고 싶었을 때 기존에는 style="display: block" none 등을 사용했었다. 리액트에서는 state를 이용해 삼항연산자를 사용한다 조건에 따라서 컴포넌트 보여주고 싶으면 JSX 안에 if 대신 삼항연산자를 사용하면 된다. *삼항연산자 조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드 JSX에서 아무것도 없는 HTML을 내보내고 싶으면, null을 사용하면 된다. UI를 만들 때 state 데이터를 이용한다. let [컴포넌트이름, 컴포넌트변경함수] = useState(false); 컴포넌트를 켜고 닫는 스위치 역할을 한다. state변경할 때는 state변경함수 사용해서 onClick = { () => ..
-
[React] Component 만들기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 13. 06:55
Component HTML을 한단어로 줄여서 쓸 수 있는 방법 Component 만들기 1. 함수로 이름짓기 2. return. ( )안에 축약 원하는 HTML 넣고, 3. 원하는 곳에서 주의사항 1. 이름은 대괄호로 한다 2. return( ) 안에 div 여러개 할 수 없다. 태그 하나로 묶어야 한다. 의미없는 div 쓰기 싫으면 로도 묶을 수 있다. 3. function App()과 나란히 컴포넌트 만들면 된다. function 컴포넌트이름() { return ( HTML 축약 ) } 장점 1. HTML 축약해서 쓸 수 있어서, 컴포넌트로 만들어 관리가 편해짐. 2. 너무 많이 만들면 관리가 힘들기 때문에, 꼭 필요한 것만 만드는 것이 좋다. -> 반복적으로 나오는 HTML 덩어리를 컴포넌트로 만드..
-
[React] 버튼 기능개발, 리액트 state 변경하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 12. 10:20
좋아요 버튼 만들기 span 태그를 누르면 숫자가 1씩 증가하게끔 해야한다. 기존에 JavaScript로 구현할 때, addEventListener나 onclick 메소드를 사용했었다. 리액트에서도 onClick={클릭될때 실행할 JS}를 사용할 수 있다. 주의사항은 click을 적을 때 대문자로 적어야하고, JS를 { 함수() } 괄호로 감싸주어야 한다! 익명함수도 가능하다! { () => {} }이런식으로 적으면 된다. let [따봉, 따봉변경] = useState(0); return ( { 따봉변경(따봉 + 1) }}>👍🏻 {따봉} ) 위와 같이 state변경함수로 변경해야 재렌더링이 잘 일어난다. 스무스~! 단순히 함수 이름을 넣을 때 onClick = { 제목바꾸기() } 하면 함수가 바로 실행..
-
[React] useState로 데이터바인딩하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 12. 09:47
1. 데이터바인딩할때 state에 보관하거나, 변수에 보관하는 방법이 있다 App.js 맨 위에 import React, { useState } from 'react'; 를 추가한다. 리액트에 있는 내장함수를 쓰겠습니다. 라는 뜻이다! useState함수를 사용할 수 있다. 2. 리액트의 데이터 저장공간 state 만드는 법 useState('운동화 추천'); 실행하면 array가 나오는데, array 안에는 a, b가 있다. [a, b] a: 진짜 데이터 b: 운동화 추천 state 정정해주는 함수 [state데이터, state데이터 변경함수] let [글제목, 글제목변경] = useState('운동화 추천'); 정리 state는 1. 변수 대신 쓰는 데이터 저장공간이며, 2. useState()를 이..
-
null 병합 연산자를 이용해 코드 개선하기, reduce 함수 구현해보기🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 9. 9. 23:30
콜백함수를 이용하여 나만의 reduce함수 만들기 reduce는 initialValue가 있으면, initialValue를 처음으로 하여, reduce를 해간다. accumulator = initialValue initialValue가 없으면, array의 첫번째 원소값을 처음으로 하여, reduce를 해간다. accumulator = array[0] 이 부분을 코드로 처음 구현했을 때는 아래와 같았다. 삼항연산자나 null 병합 연산자를 사용하라는 코드리뷰를 받고 개선해보았다! null 병합연산자는 처음 알게 되었다. null 병합연산자 ?? ??는 null 병합연산자로, 짧은 문법으로 여러 피연산자 중 값이 확정되어있는 변수를 찾을 수 있다. a ?? b의 경우 a가 null도 아니고 undefine..
-
[React] JSX로 HTML 코딩하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 2. 12:00
1. App.js 필요없는 것들 다 지운다. JSX란? JS함수인데, HTML 작성할 수 있다. 평소에 웹 만들 때처럼 HTML을 여기에 코딩하면 된다. React는 HTML 대신 JSX를 사용한다. 2. 태그에 클래스를 설정할 때, className를 사용한다. 일종의 JavaScript이기 때문에, class라는 예약어가 있어서 className으로 설정한다. css로 설정하기 위한 클래스이다. 3. React가 쌩 HTML보다 편한 이유 데이터 바인딩이 쉽다. React, Angular, Vue는 데이터바인딩을 쉽게 하게 도와주는 라이브러리이다. 전통적으로는 아래와 같이 진행하며, HTML에 넣는 식으로 진행한다. let data = '배고프다'; // 서버에서 받아온 데이터 document.get..