반응형 리액트7 use-query-params 로 queryString 관리하기 use-query-params 라이브러리를 사용하면 Default 값도 사용할 수 있고, 각각의 쿼리의 타입도 지정할 수 있어서 편하다. 아래와 같은 형식으로 set을 하면 queryString이 자동으로 관리된다. (자세한 내용은 맨 밑의 공식 문서 참고) const [query, setQuery] = useQueryParams({ pageNo: withDefault(NumberParam, DEFAULT_PAGE_NO), pageSize: withDefault(NumberParam, DEFAULT_PAGE_SIZE), sortColumn: withDefault(StringParam, DEFAULT_SORT_COLUMN), sortOrder: withDefault(StringParam, DEFAULT_S.. 2022. 4. 3. 스타트업 신입개발자 다섯 달 생존기 오랜만에 적어보는 생존기! 신기하게도 나의 허접한 글을 기다려주시는 분도 생기고, 구독자도 생겼네..! 블로그에 글을 적는게 계속 마음속에 숙제처럼 남아있었는데, 한동안 시간적으로 마음적으로 여유가 되지 않아서 쓰지 못했다. 오랜만에 마음을 좀 정리하는 시간을 가져야겠다고 생각했는데, 블로그가 떠올라 들어오게 되었다. 요약하자면 나는 아직 그때 그 같은 회사에서 열심히 일하고 있고, 회사도 나도 생존하고 있다. 하지만 잘~ 지냈다고 말할 수는 없는게, 그동안 좀 많은 일이 있었던 것 같다. 1. 3개월 수습 기간 종료 후 퇴사를 결심하다. 사실 이걸 어떻게 정리해서 적을 수 있을지 모르겠어서, 생존기를 적지 못하고 있었던 것 같다. 처음에 면접을 보고 입사할 때, 대표님께서 3개월의 수습기간을 얘기하셨다.. 2021. 11. 13. [React] Context 란? Context 활용 방법, 공식 문서 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다 언제 context를 써야 할까 context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인.. 2021. 6. 28. 스타트업 신입개발자 한 달 생존기 6월 1일 첫 출근을 시작하고 정신없이 지내다 보니 어느덧 4주가 지나갔다. 진짜 이번주까지는 공부하고 일하느라 쉴틈이 없었던 것 같다. 다행히 이번 주말은 회사 일은 잠시 내려놓고 내가 하고싶은 공부를 할 수 있는 시간이 주어졌다. 나는 국비학원을 마치고 혼자서 작은 프로젝트를 몇 개 해보고 스타트업으로 취업하게 된 케이스이다. 학원에서는 자바, 스프링, 오라클DB, 자바스크립트, 제이쿼리를 위주로 배우며 프로젝트를 했었다. 그래서 취업준비를 할 때에도 똑같은 언어와 기술들을 쓰는 곳들을 지원했다. 이 기술들도 내가 완벽하게 알고 있다고 생각하지 않아서 다른 언어를 쓰는데는 아예 지원하지 않거나 연락이 오는 곳에도 거절을 하곤 했다. 지금 다니게 된 스타트업에도 내가 배운 기술들을 미리 말씀드렸고, 처.. 2021. 6. 26. [React 문서] State and Lifecycle, 이벤트 처리 함수에서 클래스로 변환하기 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); 함수에서 클래스로 변환하기 다섯 단계로 상기의 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다. render()라고 불리는 빈 메서드를 추가합니다. 함수의 내용을 render() 메서드 안으로 옮깁니다. render() 내용 안에 있는 pro.. 2021. 6. 3. [React 문서] JSX, 엘리멘트 렌더링, Component와 Props (주요 개념 1~4) 가장 단순한 React 예시 ReactDOM.render( Hello, world!, document.getElementById('root') ); JSX 소개 const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는.. 2021. 6. 2. [React 생활코딩] 1. 소개 및 개발환경 리액트의 장점 가독성 재사용성 유지보수 컴포넌트를 중심으로 현대적인 웹애플리케이션 UI를 만들 수 있다. Coding -> Run -> Deploy 의 순서로 배울 것 React 공식문서 홈페이지 활용하기 https://reactjs.org 실습을 위한 개발환경 셋팅 1. Nodejs 설치파일 다운로드 후 실행 https://nodejs.org/ko/ 2. npm 이용하여 Create React App 설치 cmd창에서 npm -v 입력 후 버전확인 npm install -g create-react-app 입력하여 설치 후 create-react-app -v 입력하여 버전확인 3. react-app 디렉토리 설정 및 실행 react-app 디렉토리 생성 cd C:\react-app 입력하여 해당 디렉토리.. 2021. 6. 2. 이전 1 다음 반응형
