Web/React

[React] url query string 파싱하기- 리액트 라우터,타입스크립트

이번 프로젝트에서 게시글을 사용자가 선택한 옵션에 맞게 필터링 해 주는 기능을 만들어야 한다. 대부분의 사이트들이 선택한 필터링 조건을 url에 쿼리 스트링 형식으로 나타낸다. 그렇기에 새로고침이나 뒤로가기 등의 동작에도 사용자의 선택을 유지 시킬 수 있다. 우리 프로젝트는 기본적으로 url에 따라 보여줄 페이지를 매칭 시켜주는 리액트 라우터 라이브러리를 사용하고 있다. 리액트 라우터 라이브러리를 통해서 필터링 조건을 url로 설정하고, 쿼리를 파싱 하는 예제를 알아보자. 예제 동작 살펴보기 피자 주문을 위한 옵션 선택 창이다. / 도메인으로 최초 접속시 기본 form이 나온다. 페퍼로니, 피망, 올리브는 중복 선택이 가능하고, 크러스트는 세가지중 한가지만 가능하다. 소스 추가는 선택이다. 여기에서 옵션..

[React] componentDidMount 에서 async/await 사용하기

클래스 컴포넌트 생명주기 함수 중 하나인 componentDidMount() 안에서 await을 사용하는데 다음과 같은 에러가 났다. Parsing error: Unexpected reserved word 'await'. componentDidMount() { await tmModel.loadModel() // teachable machine 로드 } 해결 방법은 componentDidMount 앞에 async를 붙여주면 된다. (Create-react-app으로 프로젝트를 만든 경우) async componentDidMount() { await tmModel.loadModel() // teachable machine 로드 } CRA로 만든 프로젝트가 아닌 경우 웹팩 설정을 수정해줘야 한다. 우선 bab..

[React] Props Getters 패턴

유데미 강의를 듣고 실습한 내용 정리하기 이전 글에서 prop collection을 사용했다. prop collection을 통해서 전달 해야하는 여러개의 prop들을 한번에 관리 할 수 있다. const toggleProps = { onClick: updateClapState, "aria-pressed": clapState.isClicked, }; 그런데 만약 toggleProps의 다른 prop들은 가져와서 사용하고, onClick함수만 다른 함수를 사용하고 싶다면 어떻게 해야 할까? toggleProps의 updateClapState 함수 대신 새로운 핸들러인 handleClick를 onClick에 등록하고 싶다면 다음과 같이 오버라이트를 통해 구현할 수 있다. 이렇게 작성하면 toggleProps..

[React] Props collection 패턴으로 prop 전달하기

유데미 강의를 듣고 실습한 내용 정리하기 Props 넘겨주는 방법 리액트에서 하위 컴포넌트로 prop을 넘겨주는 방법은 다음과 같이 컴포넌트에 속성명을 작성하고 값을 넘겨준다. prop을 전달 받은 컴포넌트는 함수의 인자로 prop을 받는다. const ClapContainer = ({ children, setRef, handleClick, ...restProps }) => { return ( {children} ); }; Prop 이름을 변경하고 싶다면? 버튼을 클릭 했을 때 작동할 핸들러 함수를 prop으로 넘겨주어 onClick속성에 할당한다. 그런데 만약 핸들러 함수를 넘겨주는 속성명을 handleClick에서 다른 이름으로 변경한다면 어떻게 해야 할까? handleClick 을 clickHand..

[React] custom hook 활용

유데미 강의를 듣고 실습한 내용 정리하기 최초 마운트에는 실행하지 않는 커스텀 useEffect만들기 클릭 하면 클릭 횟수(초록 동그라미), 전체 카운트(회색 글씨)가 각각 1씩 증가되고 클릭 애니메이션이 나타나는 컴포넌트를 제작한다. 버튼 클릭하면 카운트들이 +1회 증가므로 카운트 값이 변경되면 애니메이션을 실행시켜 주는 함수를 실행하도록 한다. useEffect(()=>{ //애니메이션 함수 실행 },[count]) 그런데 문제가 생긴다. 버튼을 클릭 해야만 애니메이션이 실행되어야 하는데 useEffect는 최초 마운트시에도 useEffect안의 내용이실행되기 때문이다. 따라서 단순이 페이지를 로딩했을 뿐인데 애니메이션이 실행 되어버린다. 이를 해결하기 위해서 변수를 하나 두어서 컴포넌트가 마운틴 된..

[React] 커스텀 훅 만들기

커스텀 훅을 만들면 반복되는 컴포넌트 로직을 함수로 만들어서 재사용할 수 있다. 채팅 어플리케이션에서 사용자가 접속중이면 접속중인 상태는 검정색 접속중이 아닐때는 검정색으로 상 나타내기로 했을 때, 이 상태 표시창을 여러 컴포넌트 ( 친구 정보, 친구리스트) 에서 해야 한다면 어떻게 해야 할까? 각 컴포넌트 안에 state를 만들고 useEffect를 통해 서버로부터 접속 상태를 얻어올 수 있다. 그러나 이 방식을 사용하면 완벽하게 똑같은 로직 (서버와 통신하는 코드)를 중복하여 두 컴포넌트안에 작성하게 된다. 이렇게 중복되는 로직을 하나의 기능을 담당하는 함수로 분리하여 코드를 작성하는것 처럼 커스텀 훅을 사용하여 재사용할 수 있다. React Custom Hook 두 개의 자바스크립트 함수에서 같은 ..