1. react-datepicker로 달력을 구현하기로 했다.현재 진행하고 있는 프로젝트에서 달력으로 날짜를 선택하는 것을 구현해야 했다. 달력을 직접 구현하는 것은 힘들 것 같아서 ‘react-datepicker’ 라이브러리를 사용했다. 일단 달력 UI를 피그마에 맞게 커스텀하는 것에 집중했다. 달력을 커스텀하는 것은 생각보다 어려웠지만, 여러 번 시행착오를 겪으니 비슷하게 보이게 만드는데에는 성공할 수 있었다. 2. 이제 날짜 상태를 관리하자이제는 선택한 날짜를 상태로 관리해야 한다.먼저 구조를 설명하자면, SelectBox를 클릭하면 내가 만들어놓은 Dialog 컴포넌트가 나오고, Dialog 컴포넌트의 children에 Datepicker가 있고 그 밑에는 확인(confirm) 버튼과 닫기(ca..
0. 이번 주는 공통 컴포넌트를 만들기로 했다.현재 프론트 2명, 백엔드 1명, AI 1명으로 구성된 프로젝트에 참가 중이다. 나랑 같이 웹 프론트엔드로 참가하는 친구는 교내 개발동아리와 연합 개발동아리에서 프로젝트 개발을 하며 경험치를 많이 쌓아서 개발에 능통하다. 이 친구와 이번 주에는 프로젝트의 공통 컴포넌트를 제작하기로 했다. 친구는 컴포넌트를 어떻게 만들까? 친구의 코드를 살펴보기로 했다.1. 폴더(파일) 구조부터 확인하자src 안에 components 폴더를 만드는 것은 똑같은데, common components들을 저장할 common 폴더를 따로 만들고, 도메인별로 폴더를 만들어서 컴포넌트 파일들을 분리한다.input 컴포넌트를 만든다고 가정하자. 친구는 components/common 안에..
이번에 프로젝트를 진행하면서 useState()를 활용한 상태관리를 하고 있는데, 상태관리에 대한 확실한 이해 없이 무작정 작업을 하다보니 코드가 내가 이해하기도 어려울 정도로 복잡해져 있었다. 그래서 상태관리에 대한 공부를 하고 다시 코드를 수정했다. 이번에 알게 된 내용을 한 번 정리해 보려 한다. 1. 상태 관리는 부모에서 이루어지고, 자식에게 props로 전달한다. 부모 컴포넌트 A와 자식 컴포넌트 B,C가 있다고 가정하자. 그렇다면 상태를 관리하는 로직은 부모 컴포넌트 A에 작성하고 이를 자식한테 props로 전달하면 된다. 만약 자식 컴포넌트에서 버튼을 클릭하면 상태가 업데이트되는 것을 부모한테 전달하고 싶다고 가정하자. (여기서 부모는 SearchResult.tsx이고, 자식은 BtmShee..
useEffect()는 코드의 실행 시점을 관리할 수 있는 함수이다. useEffect()는 두 개의 argument를 가지고 있는데, 첫 번째 argument는 우리가 실행하고 싶은 코드가, 두 번째 argument에는 [] 배열(dependency)이 있다. 두 번째 argument에 무엇이 들어가느냐에 따라 실행 결과가 달라지는데, 1. 빈 배열을 넣는 경우 -> 최초 1회 랜더링 될 때만 실행한다. 2. [a] -> a가 변경될 경우만 랜더링한다. 3. [a, b] -> a나 b중 하나가 값이 변경 될 때 랜더링한다. useEffect()를 사용하여 불필요한 렌더링과 작업을 방지할 수 있다. 예시 코드 const onChange = (event) => setKeyword(event.target.v..
React에서 Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매커니즘이다. 요소를 만들 때마다 스타일들을 작성해주는 것은 너무 시간이 오래 걸린다. 그 대신 스타일들을 모두 갖는 단 한가지의 컴포넌트를 만들어서 사용할 수 있다. Props 코드 예시 내가 만들고 사용하는 모든 컴포넌트들은 function Btn() -> 괄호로 argument(인자)를 받는데, 이 때 argument의 이름은 마음대로 지어줄 수 있다. 리액트가 실제로 하는 작업은 함수(Btn())를 호출해서 우리가 넣어둔 모든 것들을 첫 번째 인자로 넣어주는 것이다. Btn 컴포넌트의 prop들에게 접근하려면 prop.text 등으로 적어준다. React.memo() props에 function도 보낼 수..
어떻게 하면 React.js에서 값이 바뀔 데이터를 담아줄 수 있을까? useState()를 활용하면 React.JS에서 데이터를 저장시켜 자동으로 리렌더링을 일으킬 수 있다. useState() 코드 예시 const data = React.useState();를 console.log 시키면 [undefined, f ] -> undefined와 함수가 적힌 배열이 나타난다. undefined는 data이고 f는 data를 바꿀 때 사용하는 함수이다. React.useState() 함수는 초기값을 설정할 수 있다. 즉, undefined -> 초기값 , f -> 그 값을 바꾸는 함수이다. React.useState() 배열에서 보통 데이터에는 counter처럼 원하는대로 붙이고 f는 set 뒤에 데이터 이..
createElement React에서는 createElement 함수를 통해 React 요소를 생성할 수 있다. 하지만 실제로 createElement를 쓰는 경우는 많지 않기에, 이해만 하고 넘어가자. createElement를 쓸 때 첫 번째 argument는 root에 들어갈 HTML 태그이며, 두 번째 argument는 props가 포함된 object, 세 번째 argument는 content이다. ※ chatGPT의 createElement에 대한 설명도 첨부한다. React.createElement(type, [props], [...children]) type: React 요소의 타입을 나타냅니다. 예를 들어, HTML 요소라면 문자열로 "div", "span" 등을 사용하며, 사용자 정의 ..
현재 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의를 듣고 있습니다. https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 강의를 따라가면서 create-react-app을 사용하기 위하여 Node.js를 설치하고 명령 프롬프트에서 원하는 폴더로 이동해서 'npx create-react-app .'을 입력했지만, 자꾸 오류가 떴다. 그래서 처음에는 Node.js 버전이 문제인가 싶어서 버전 16으로 다운그레이드도 해보고, 학교 와이파이라서 그런가 싶어서 집으로 이동해서 다시 설치도 해보았다. 하지만 오류는 고쳐지지 않았다. np..
밑 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의 중 일부 내용을 포함하고 있습니다. React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다. (밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 이 강의을 듣다보면 Super Converter를 만들게 되는데, Super Converter는 React의 State를 활용해서 시간/분 , 킬로미터/마일 중 변환하고 싶은 것을 골라 데이터를 입력하면 변환을 시켜주는 프로그램이다. 코드 실행..
