React (14) 리스트형 React Img Slider 구현(useRef) 캐럴 슬라이드 구현 프로젝트중 슬라이드를 구현해야해서 찾아보니깐 useRef로 구현가능하다는걸 배웠다. React에서 제공하는 기본 Hook들을 제대로 사용할줄 알면 금방 작성할 수 있다. import React from "react"; import styeld from "styled-components"; import { useState, useRef, useEffect } from "react"; const SlideComponent = () => { const slideRef = useRef(null); const [currentImgOrder, setcCurrentImgOrder] = useState(0); const IMG_WIDTH = 200; const slideRange = currentI.. TIL 28 React Redux기본 1. Redux란? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 쉽게 생각하면 각 컴포넌트마다 관리했던 state값들을 전역에서 관리해주는것이라고 이해하면된다. 프로젝트를 진행하다보면 부모 컴포넌트에서 하위 컴포넌트에다가 state값들을 props로 타고 타고 넘겨주는걸 경험해봤을텐데 이를 하나의 store에다가 관리를 해 어디에서든 접근이 쉽게 만들어준다. 2. 리덕스 프로젝트 구조 └── redux ├── index.js // root reducer ├── counter.js // 기능 1 ├── fetch.js // 기능 2 src파일에다가 redux폴더를 만들어주고 redux의 구성 요소인 Action Type, Action, Reducer 셋을 모두 하나의 파일 안에서 관.. TIL 22 React ref 리액트에서 돔요소를 직접 조작해야 할때 ref를 사용해야된다. 스크롤 이벤트로 해당 element로 이동해야할때도 쓰인다. 먼저 ref 쓰기위해서 useRef함수를 사용한다고 선언을 해야한다!!! import React, { useRef } from 'react'; 그리고 ref로 지정할 변수를 선언을 해줘야한다 const pageHeaderRef = useRef(); 이동하고 싶은 요소에다가 ref속성을 쓰고 선언한 변수를 넣어준다. const goToPagePosition = position => { position.current.scrollIntoView({ behavior: 'smooth', }); }; 그리고 scrollIntoView를 사용할 변수에다가 ref변수명.current.scrollI.. TIL 21 리액트 Router Nav바 숨기기 문제: 로그인하는 첫페이지에만 Nav바를 숨기고 나머지 페이지에서는 보이게구현 처음에는 라우터 컴포넌트에서 로그인을 여부를 파악해서 Nav바를 조건부 랜더링해서 해결하려고 했다. 프로젝트로 만들고 있는 사이트가 로그인 페이지에서 로그인에 성공을 하면 바로 메인페이지로 넘어가는 구조였기에 하려고 했지만 그 보다 훨씬 간단한 해결방법이 있다. 바로 라우터를 잘 사용하면된다!! 라우터 본체 파일에 가장 첫화면에 나오는 EnterPage컴포넌트와 그외에 Nav바가 보여질 컴포넌트들이 모여있는 User라는 컴포넌트가 들어가 있다. User컴포넌트 path를 보면 '/*' 이렇게 되어있는데 '/' 경로다음에 올 모든 path를 포함한 경로다. EnterPage를 제외한 모든 컴포넌트들이 들어가 있는데 상단에 보면 .. TIL 20 리액트 함수형 컴포넌트(useState) 1. 함수형 컴포넌트 1차 프로젝트때 클래스형 컴포넌트만 사용하다가 2차 프로젝트는 함수형 컴포넌트를 사용하기로 했다. 클래스형 컴포넌트에서 해결하기 힘든 여러문제들을 커버하기 위해서 나온 컴포넌트이다. 1.1 함수형 컴포넌트 기본 작성 class Welcome extends Component { constructor() { super(); this.state = {name:' jeon'} } render() { return Hello, {this.state.name}; } } export default Welcome; 위 코드는 기존에 사용했던 클래스형 컴포넌트이고 import React, { useState } from 'react'; function funcComponent() { return ( .. TIL 19 Props로 받은값 State로 넘기기 컴포넌트에서 Props로 받은값을 state에 저장하는걸 구현해봤다. 각 코멘트에 들어가있는 유저이름 코멘트 내용 좋아요 갯수를 mock데이터로 받아서 구현한 것이다. 코멘트는 컴포넌트이다. commentInfo라는 props값들을 받아서 해당 컴포넌트에서 뿌려주는 형태이다. CommentIndividual을 보면 render부분은 제외한 코드인데 중요한건 componentDidMount을 보면 된다. state에 likeNumber값은 0으로 두고 리액트의 라이플 사이클 render()함수가 끝마치고 실행되는 componentDidMount를 보면 likeNumber을 props로 받아온 commentInfo.like_number로 바꿔 줄 수 있다. 바로 props의 값을 state값으로 갱신한것을 .. TIL 18 fetch기능 Post 구현하기 별점기능 구현에서 별점을 클릭했을때 Post메소드로 통해서 점수를 백엔드 서버에 전송해서 DB에 저장을 한후에 저장된 값을 Get메소드로 가져올려고 했다. 그럼 fetch함수를 두번사용해서 구현하는데 Post의 fetch가 함수가 실행되고 다음 get의 fetch함수가 실행될때 텀이 생기는데 이 사이에 클릭이 fetch를 실행하는 함수가 중첩되면서 오류가 생겼다!! 해결책으로는 post함수 한번으로 get기능도 실행 할 수 있다 현재 registerStarScore함수는 별점구현을 했을때 fetch를 통해서 점수를 post를 통해서 서버에 보내주고 두번째 .then에서 백엔드에서 보내준 data중 평점값을 가진 키값에 접근을해서 바로 setState를 통해서 변경이 가능하다. 물론 이방법은 백엔드에서 p.. TIL 17 React 별점구현하기(기본) 1. 첫번째로 생각했던 기능구현 팀프로젝트로 영화리뷰사이트를 배정받았고 그중에서 영화상세페이지를 맞게되었다. 가장 처음으로 접근한 방법은 마우스 커서위치에 따라서 별 색깔을 달라지게 구현을 하려고 했다. 자바스크립트에서 pageX, pageY를 통해서 해당 커서위치 좌표를 받아서 그것을 사용해서 조건문을 통해 img의 src를 바꿔주기로 했다. if(e.pageX =430 && e.pa.. 이전 1 2 다음 목록 더보기
