본문 바로가기

프로그래밍 에러 Error/리액트 React5

리액트 반복문 map 함수 1. 자바스크립트 map 함수 쓰는 법 array(어레이) 자료형을 하나 만들고, 콜백함수(function)을 넣으면 map 안의 코드가 array 자료의 갯수만큼 반복된다. 이렇게 하면, 234234234 이렇게 [2, 3, 4] 안의 데이터가 붙어서 3번 출력된다. var 어레이 = [2, 3, 4]; 어레이.map(function(){ return 어레이; }); 2. 자바스크립트 map 함수 쓰는 법 2 어레이 안에 있는 자료에 대해 전부 10 곱해서 출력하려면, 콜백함수 소괄호 안에 파라미터를 아무거나(a) 입력하고, a*10을 return 해 준다. [20, 30, 40] 이 출력된다. var 어레이 = [2, 3, 4]; 어레이.map(function(a){ return a*10; }); 3.. 2021. 9. 20.
[리액트 React] 쇼핑몰 프로젝트_05_Router 만들기 페이지 나누기 - 라우팅 예를 들면 쇼핑몰의 메인페이지와 상세페이지로 나누기 react-router-dom 설치하기 BrowserRouter HashRouter # ==> 서버에 전송되지 않음 2021. 3. 28.
[리액트 React] 쇼핑몰 프로젝트_03 1. import / export 사용해서 데이터 바인딩하기 - 신발 shoes에 대한 정보(데이터)를 담은 배열(array) 만들기 --> useState - 필요한 데이터를 웹 페이지에 띄우기 --> 데이터 바인딩 2. object와 array 차이 3. 반복적인 HTML요소가 많다면 반복문이나 Component 이용 - 특정 div 태그를 Component로 만들어서 web page에 나오게 하기 - Component 바인딩 하기 - Conponent를 반복문 돌리기 4. Props 사용하기 부모 component에 있는 state를, 자식 component에서 사용하고 싶으면 props를 이용해야 한다. 5. 각각의 자식 Component에 다른 data 전송하기 data.js에서 받아온 데이터에.. 2021. 3. 28.
[리액트 React] 쇼핑몰 프로젝트_02 1. 쇼핑몰 레이아웃 디자인 대부분의 쇼핑몰 사이트는 상단에 메뉴를 선택할 수 있는 nav-bar, 큰 이미지가 보이는 대문 사진, 판매중인 상품들, 이런 식으로 레이아웃이 구성되어 있다. 레이라웃 구성에 대해서 생각해보고 지난 시간에 설치한 react-bootstrap 라이브러리를 이용하여 디자인을 구현한다. 2. react-bootstrap 컴포넌트(component) 사용하기 - navbar : 상단 바 - jumbotron : 페이지 대문 - container : 상품 리스트 - component 사용중에 발생한 에러 - 상품 레이아웃은 react-bootstrap 라이브러리 사용하지 않음 3. Code Shopee Home Link Action Another action Something Sep.. 2021. 3. 28.