개발공부34 React : 아이템 카테고리 메뉴 만들기 오늘은 내가 1차프로젝트를 하면서 구현한 Nav바에대해서 정리해보려고한다. 1. 카테고리별 버튼을 만들어둔다. 2. 버튼을 클릭했을때 해당 카테고리 URL로 이동한다. 3. 해당 URL로 이동되었을때 해당 카테고리 btn이 선택되게한다. ✅ 전체코드 더보기 전체코드 Item.jsx {/* 제품분류 [HOME > 대분류 > 소분류] */} HOME SHOES {category} {/* 제품 카테고리 (SHOES MAN WOMAN ..) */} {category} {/* 카테고리별 이동 링크 */} {['전체', '러닝화', '워킹화', '트레킹화', '스니커즈', '샌들', '아동화', '기타'].map(cate => { return ( {cate} ); })} 1. 카테고리별 버튼을 만들어둔다. {/* .. 2022. 10. 11. React : useEffect사용법과 LifeCycle이란? 컴포넌트의 Lifecycle 이란 컴포넌트의 인생주기와도 같다. Q. 그게 무슨소리임...? 페이지에 불러와질때 (mount) 페이지에 이미지/숫자/텍스트등 변경이 될때 (update) 페이지에서 벗어날때 (unmount) 를 말한다. 우리는 이걸 알아야지 useEffect를 좀더 깊이있게 사용할수 있을꺼라고 나는 생각한다. Q. 그전에 useEffect가 정확히 무슨 역활을 하는Hook인데? useEffect는 mount / update / unmount 될때 코드를 실행시켜주는 Hook이다. Q. 그래서 왜 쓰는데? useEffect는 HTML이 모두 랜더링 된 이후에 실행된다. Q. 어쩌라고 그게 뭐 어쨌는데 자바스크립트 동작순서는 위에서부터 아래로 내려오면서 하나하나 코드를 읽어간다. 근데 만약 .. 2022. 9. 14. React : URL에 따라 상품상세정보 보여주는 방법 (useParams 사용) 상품상세정보를 만들려고하면 우리는 고객이 해당 주소를 검색하거나 혹은 해당 상품을 눌렀을때 해당 제품이 보여지게 해야한다. 먼저 머릿속으로 정리를 해본다. 1. 상품데이터를 API로 받을때 id값을 같이받는다. 2. URL파라미터 문법을 사용해 페이지를 여러개 만들수 있게 만들어둔다. 3. 상품 컴포넌트 안에 데이터를 가져오는 배열 index에 해당 아이템의 id 값을 넣어준다. 추가 조건 + 상품 id 와 동일한 URL을 적었을때 해당 상품을 보여주게 한다. 1. 상품데이터를 API로 받을때 id값을 같이받는다. 우리는 마지막에 저 id의 숫자를 URL에 입력했을때 해당 상품이 뜨게 할것이다. 2. URL파라미터 문법을 사용해 페이지를 여러개 만들수 있게 만들어둔다. path='/detail/:id' .. 2022. 9. 13. React : 페이지안에 페이지를 만들어주는 Nested Routes /Item/man 으로 접속하면 남성상품을 보여주고 /Item/woman 으로 접속하면 여성상품을 보여주고싶을때는 어떻게 할까? // 남성상품 컴포넌트 2022. 9. 13. React : 없는페이지에 접속했을때 404페이지 만들기. 유저가 만약 이상한 경로로 접속했을때 "없는 페이지입니다" 혹은 "잘못된 경로입니다" 같은 페이지를 보여주고싶을때는 path 에다가 경로를 *로 지정해주면된다. ⬇️ 코드 ⬇️ 결과화면 2022. 9. 13. React : 프로젝트 시작하는 방법 리액트 프로젝트를 시작할때 프로젝트를 생성하는 방법은 먼저 폴더를 생성후 폴더를 우클릭>서비스>폴더에서 새로운 터미널 열기를 눌러준다. 터미널창에 ⬇️ 아래와 같이 입력해준다. npx create-react-app 폴더명 입력할때는 한글로 작성하면 안되고 영어로 작성을 해주어야 한다. 입력을 하고 엔터를 눌러주면 설치가 진행되고 설치가 완료되면 아래와같은 화면이 뜬다. ⬇️ ⬇️ 해당 폴더에 내가 지정한 폴더명으로 폴더가 만들어지고 안으로 들어가보면 이렇게 파일이 세팅되어있다. 이제 vscode로 폴더를 열어주고 터미널 창에 아래와 같이 작성해주면 웹페이지에 프로젝트가 실행된다 npm start 위에처럼 뜨면 성공! 이제 프로젝트를 시작하면된다. 2022. 9. 13. React : Props(프롭스) 정리 Props란? - Props는 Properties의 줄임말이다. - 부모 컴포넌트가 자식컴포넌트에게 전달해주는 값이다. - 리액트에서 props를 값을 읽기 위해서만 사용한다. 값을 변경하려면 오류가 발생한다. 1. 기본적인 문법 부모 컴포넌트 import 자손컴포넌트명 from '자손컴포넌트경로'; function 부모컴포넌트(){ return( ); } - 이떄 자손컴포넌트를 불어오는 부모컴포넌트가 자손컴포넌트태그에 주는 속성명의 값을 props라고 한다. 자손 컴포넌트 import React from 'react'; function 자손컴포넌트(props){ return( {props.속성명} ) } export default 자손컴포넌트 - 이때 속성명은 부모가 자손태그에 내려준 속성명이다 기본예.. 2022. 8. 19. React : JSX 문법 정리 JSX란 ? - Javascrpt XML의 약자이다. - 리액트에서 UI를 표현할 때 쓰는 문법이다. - 자바스크립트의 확장문법 XML과 매우 비슷하게 생겼다. - 브라우저에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환해준다. - HTML코드와 비슷하게 작성하기 떄문에 쉽고 익숙하다. - 컴포넌트들도 HTML태그 쓰듯이 작성해 활용도가 높다. JSX문법 1. 태그는 최상위 태그로 감싸주어야 한다. - JSX문법은 요소를 반드시 하나이 요소로 묶어주어야 한다. 태그로 감싸주기 import React from 'react'; const App = () => { return ( Hello! React! ); }; export default App; div로 크게 묶는 것도 한가지 방법.. 2022. 8. 19. React : State 설명 및 예제 (React Hooks) 1. State란 ? - 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야 할 때에 사용한다. - 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴 때 state라는 것을 사용한다. - 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다 - 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다 2. 사용 예제 import React from 'react'; const App = () => { let myName = "제 본명은 최승철"; function changeName() { myName = myName === "헤어디자이너 촤리" ? "제 본명.. 2022. 8. 18. React : 로그인 버튼 활성화 [로그인 유효성 검사 Validation] 3-2. Login | 로그인 버튼 활성화 (validation) 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요. ex. ID - @ 포함 / PW - 5글자 이상 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다. 1. isValid state를 만들어준다. const [isValid, setIsValid] = useState(false); isValid 에는 true/false 값만 존재하고 초기값으로 false를 주었다. 왜냐하면 유효하지 않을때는 버튼이 비활성화 되기 떄문에 초기값을 false로 설정해 주었다. 2. handleIdInput 함수안에 삼항연산자를 이용해 1차적으로 조건에 맞는지 검사를 진행한다 (ID - @ 포함.. 2022. 8. 17. React : 로그인 사용자 입력 데이터 저장 Mission 3-1. Login | 사용자 입력 데이터 저장 다음의 순서에 맞게 코드를 작성하여 ID, PW 에 입력된 값을 state 에 저장해주세요. ID 에서 onChange event 발생 event 발생 시 handleIdInput 함수 실행 handleIdInput 는 이벤트를 인자로 받음 event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장 위의 과정을 PW 에도 동일하게 적용 1. ID 에서 onChange event 발생 {/* id값을 받아오는 onChange */} {/* pw값을 받아오는 onChange */} input 태그 내부에 onChange={} 이벤트를 작성해준다. 2. event 발생 시 handleIdInput 함수 .. 2022. 8. 17. React : 리액트 라우터(Router) 설치 및 컴포넌트 구현하기 Router를 사용하기 전에 우리는 SPA가 무엇인지 알고 넘어가야 한다. 1. SPA SPA(Single Page Application) : 페이지가 하나인 애플리케이션 HTML로 프로젝트를 할 때는 html 파일이 페이지 수만큼 존재했지만 리액트 프로젝트에서는 html은 한 개만 존재한다. 그럼 페이지가 여러 개 일 때는 어떻게 해야 하는가?? 한 개의 웹안에서 여러 개의 페이지를 보여주는 방법이 바로 Routing을 사용하는 것이다. 2. Routing 라우팅 이란 다른 경로(URL 주소)에 따라 다른 View(화면)을 보여주는 것이다, 리액트 자체에는 이러한 기능이 내장되어있지 않다. 그렇기 때문에 리액트가 Framework가 아닌 Library로 분류되는 것이다. React-router는 리액트.. 2022. 8. 16. 이전 1 2 3 다음
