본문 바로가기

전체 글

(404)
[React] 드롭다운 / DropdownStrap 드롭다운 기능을 위한 Dropdown 드롭다운을 구현하기 위해 사용해야 하는 reactstrap이 여러개인데 묶음으로 알아주는 것이 좋음 아래 코드를 통해 어떻게 사용하는지 자세히 알아보고자 한다 [Dropdown] import {useState} from 'react'; import {ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap'; function DropdownStrap(){ const [open, setOpen] = useState(false); // (1) return( // (2), (3) setOpen(!open)}> // (4) 버튼 Dropdown // (5) 헤더 // (6) 비활성화 버튼 < a..
[React] 네비게이션 / BreadCrumbStrap 웹 내에서 유저의 위치를 나타내는 네비게이션 시스템 BreadCrumb 웹페이지에서 네비게이션 바가 주로 등장하는데 이를 사용하기 위해 BreadCrumb를 사용할 예정이다 [BreadCrumb] import {Breadcrumb, BreadcrumbItem} from 'reactstrap'; // (1) function BreadCrumbStrap(){ return( Go Top Go Bottom Data // (2) bottom ) } export default BreadCrumbStrap; (1) BreadCrumb와 BreadCrumbItem은 포함관계로 네비게이션 바는 BreadCrumb가 안의 요소는 BreadCrumbItem으로 지정 (2) BreadCrumbItem에 active 를 사용 ..
[React] 버튼 기능 / Badge, ButtonStrap, ButtonGroupStrap reactstrap의 버튼 Button ( 시작하기 전 유의사항 ) 태그의 button과 리액트의 컴포넌트 Button은 첫 글자를 대문자로 한다는 점으로 구분 태그와 컴포넌트라는 차이점이 존재 [Button / Badge] import { Badge, Button } from "reactstrap"; // (1) function ButtonStrap(){ return( PRODUCT NAME hit // (1) // (2) Accessor 4 // (3) pill // (4) GoLink ) } export default ButtonStrap; (1) Button을 사용하기 위해서는 import를 하여 Button의 기능을 가져와야 함 (2) Badge는 꾸미는 용도로 주로 사용 (3) Button의 ..
[React] Bootstrap/Reactstrap 설치 CSS 작업을 도와주는 React-Bootstrap React에서는 CSS 작업을 원활하게 도와주는 라이브러리가 존재하는데 이가 Bootstrap이다 Bootstrap은 상태값과 클래스를 사용하고, React-Bootstrap은 function과 hooks를 사용한다 [라이브러리 다운] // (1) npm install --save reactstrap npm install --save bootstrap //(2) npm install react-bootstrap bootstrap (1) bootstap는 css를 적용하기 위한 라이브러리로 reactstrap을 설치해 컴포넌트에서 import하여 각 기능 사용이 가능 (2) react-bootstrap의 경우에는 css 적용과 동시에 컴포넌트에서 impo..
[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 state를 활용한 컴포넌트 사이의 데이터 전달 기존에는 부모 컴포넌트에서 props를 통해 자식 컴포넌트는 데이터를 읽어올 수 있고, 자식 컴포넌트에서 해당 변수를 변경하더라도 부모 컴포넌트에는 영향을 미치지 않았는데 state를 활용하면 이가 가능하다 이를 가능하게 하기 위해서는 자식 컴포넌트가 부모 컴포넌트에게서 변수와 해당 변수를 변경할 수 있는 set 함수를 함께 받아오면 되는 것인데, 예시를 통해 더 자세히 알아보고자 한다 [한 컴포넌트 안에서 모든 동작이 이루어지는 경우] import {useState} from 'react'; function UserList(){ const[user, setUser] = useState({name:'', age:'', address:'', tel:''});..
[JS] 전개 연산자 객체나 배열을 펼쳐내는 전개 연산자 전개 구문은 문법 이름 그대로 객체 혹은 배열들을 펼치는 것을 의미하며, 배열이나 객체 앞에 점 3개를 붙여주면 되며, 펼쳐진 객체나 배열을 담을 바구니가 필요 // 펼칠 대상이 객체인 경우 {...obj} // 펼칠 대상이 배열인 경우 [...arr] // 혹은 {...arr} 기존 ES5에서는 concat을 사용하여 배열을 합쳤다면, ES6에서는 전개 연산자를 활용하여 배열을 합칠 수 있다 [펼칠 대상이 배열인 경우] const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, [8, 9]]; const result = [...arr1, ...arr2, ...arr3]; console.log(result); /..
[React] State 사용하기 컴포넌트의 동적 데이터 State 이전까지 사용한 props의 경우에는 컴포넌트 사이의 전달하는 데이터로 부모 컴포넌트(ex. App.js)에서만 설정이 가능했는데, 읽기 전용인 props 대신 동적으로 사용 가능한 데이터인 state에 대해 알아보고자 한다 class 컴포넌트와 function 컴포넌트에서 state의 초기값을 지정하는 부분이 다르니, 해당 부분은 각각의 설명을 참고하는 것이 좋다 [ Class State의 기본 구조 및 예제] class StateComp extends Component { constructor(props){ super(props); this.state = { // (1) stateString : 'react', stateNumber : 501 } } stringCha..
[JS] 배열(array)의 삽입/삭제/추출/연결 메서드 - splice(), slice(), concat() 자바스크립트에서는 배열의 일부를 삭제하거나, 삽입, 추출이 자바에 비해서는 자유로운데, 어떤지 살펴보고자 한다. [배열의 삭제] let arr =[10, 20, 30, 40]; delete arr[1]; // (1) [10, 20, 40] arr.splice(1,1); // (2) [10, 20, 40] arr.splice(1, 2, 100, 200); // (3) [10,100, 200, 40] (1) delete 배열명[m] : 해당 배열의 m번째 요소를 삭제 (2) 배열명.splice(m 시작 위치, n 삭제 개수) : 해당 배열의 m번째(시작 위치)부터 n개만큼 삭제 (3) 배열명.splice(m 시작 위치, n 삭제 개수, n1, n2 ,,,) : 해당 배열의 m번째(시작 위치)부터 n개만큼 ..