이번에 프로젝트를 진행하면서 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를 활용해서 시간/분 , 킬로미터/마일 중 변환하고 싶은 것을 골라 데이터를 입력하면 변환을 시켜주는 프로그램이다. 코드 실행..
