React/React 강의 개념 정리19 [React] useParams 사용하기 1. Detail 파일 데이터 바인딩하기! 첫번째 Data 파일에 props 를 전송해 준다. App.js 에 받아놓은 데이터를 props 를 통해서 detail 에 전달해준다. props 를 통해서 App 에서 신발 데이터를 받아서 아래와 같이 넣어준다. 여기서 ! 그냥 shoes 관련 data 값을 하나 더 선언해서 하면 안되나요? 데이터는 여러곳에 뿌리는것이 아니라 한곳에서 관리하고 갖다 쓰는게 맞다. 신발이 3개이고 각 신발마다 detail 페이지를 만들어 주고 싶으면?? 그런데 이렇게 하는게 맞나? 다른 방법은 없을까 ?? 이런 의문이 들때에는 다른사이트를 참고해보자! 상품을 누르면 해당 상품의 특정 부여 숫자가 나온다. 누가 슬래쉬 뒤에 특정 번호로 입장을 하면 각자 맞는 상품을 보여주면 된다.. 2023. 1. 25. [React] 리액트 라우터 2: navigate, nested routes, outlet react-router-dom 의 useNavigate 기능과 nested routes와 함께 쓰는 기능인 outlet 을 알아보자! useNavigate => hook 의 일종입니다. hook 이란 ? 유용한 기능을 가지고 있는 함수같은것들 navigate를 선언할 때 페이지 이동을 할때 쓸수 있다. 어 그러면 Link 랑 무슨차이지? Link 는 a 태그같은 느낌으로 생성되어서 클릭시 밑줄이 생긴다던지 등의 차이가 있다. naviagate는 어떠한 이벤트핸들러 등과 함께 함수에 넣어서 사용이 가능하다. 일단 navigate라는 이름으로 선언한 변수에 useNavigate() 를 담아주고 쓰고자 하는 어떠한 버튼에 onClick 함수를 넣어 이동할 곳의 주소를 naviagate() 소괄호에 넣어주면 된.. 2023. 1. 23. [React] 리액트 라우터! 상세 페이지 같은 경우 주소를 /detail 로 접속을 하면 상세페이지를 보여주고 /cart로 접속하면 장바구니 페이지를 보여줍니다. 리액트 미사용시 페이지를 이동할 때는 1.html 파일을 만들어서 상세페이지 내용을 채운다. 2.누가 /detail로 접속하면 html 파일을 보내서 html 페이지를 바꿔준다. 리액트 사용시 페이지 이동할 때 리액트는 single page application (SPA) 이라고 해서 HTML을 한페이지만 사용한다.(Index.html) 1./detail 페이지를 컴포넌트로 만들어서 미리 디자인해놓는다. 2. 누가 /detail로 접속하면 기존의 html을 비우고 거기에 /detail 컴포넌트를 화면에 보여준다. 이러한 상황에서 한 화면에 어떠한 컴포넌트를 보여주고 안보여.. 2023. 1. 23. [React] 반복되는 부분 컴포넌트로 옮긴 후 map 사용하기!!!(중요) 이미 내 코드는 다 바꿔서 강사님꺼 강의과정이랑 비교해서 설명! 일단 위와 같이 반복되는 코드들이 있다. 이렇게 데이터를 작성해서 export 한 값들을 가져와 강의에선 shoes[1] 내 코드에서도 data로 가져와서 shoes에 담아뒀다. (export Default 로 보낸 데이터는 작명이 자유로움) Card 라는 컴포넌트를 만들고 이를 부모 컴포넌트에 포함시켜 준다 이렇게 포함시키면 Card 컴포넌트에 shoesData 의 데이터를 prorps 로 전달이 가능해진다. 이렇게 카드에 shoes의 데이터 값을 보내준다! 이렇게 데이터를 보내고 난 후에 props 의 데이터 값들을 보낼 수 있게 된다. 여기서 난 한가지! 이미지의 url 주소부분을 외부 data 의 array 객체 리터럴에 포함시켜 두.. 2023. 1. 23. [React] import / export 현재 진열 화면을 만들어 놓은 상태에서 데이터를 넣어보자. 현재 서버에 연결이 안되어 있기 때문에 서버에서 데이터를 가져왔다고 가정하에 진행 이렇게 심발에 넣을 데이터를 넣기위해 useState 를 선언했는데 이렇게 긴 데이터를 넣기는 부담스럽기에 다른 js 파일로 빼둘 수 있다. 다른 js 파일에 변수에 데이터 값을 넣고 그 변수를 export default 를 통해 export 할 수 있고 그 데이터 값을 다른 js 파일에서 import 하여 이용할 수 있다. 이 값을 import 한다면 import 작명 from '파일경로' 를 통해서 가져온다. 위와 같은 경우는 이렇게!! 이때 여러값을 export 하고 싶으면 ?? 이렇게 하면 된다. export default 이 아닌 export 한 데이터 값.. 2023. 1. 23. [React] 이미지 넣는 법 & public 폴더 이용하기 화면에 대문사진 넣기 div 하나를 만들고 css 파일에 높이와 백그라운드 이미지를 넣어준다 이미지는 사진 하나를 src 폴더에 넣어준후 경로를 찾아서 가져오고 화면에 맞추기 위하여 background-size:cover 를 적용해준다. 또한 background-position: center 를 적용해주면 왼쪽처럼 보이던 화면이 오른쪽과 같이 움직이게 된다. 이렇게 css에 이미지를 넣는것 뿐만 아니라 html에서 이미지를 넣고싶을때! html에서 쓰고자 할때 임의로 작명하고 경로는 해당 파일에 정확히 해준다 이를 div에서 정한 style에서 이미지를 넣고자 할때 변수를 넣으려고 할때 중간에 문자를 변수 자체로 넣는것이 아니라 문자 자체를 전달하는 식으로 넣어주어야 한다. 정리! 이미지를 가져오고 싶다.. 2023. 1. 22. 이전 1 2 3 4 다음
