리액트9 컴포넌트 분리, 3가지만 기억하자. 평소 ‘컴포넌트’라는 말을 많이 쓰는데, 정확히 어떤 것인지, 왜 써야 하는지 잘 모르고 쓰는 것 같다. 일단 GPT에게 물어보니 아래와 같이 답변해 준다. 컴포넌트란 무엇인가? 컴포넌트란? 컴포넌트(Component)는 소프트웨어 개발에서 재사용 가능하고 독립적인 기능 또는 모듈을 말한다. 이러한 컴포넌트는 소프트웨어 시스템을 구성하고 빌드하는 데 사용되며, 주로 모듈화와 추상화의 원칙을 따른다. 컴포넌트의 기능 컴포넌트는 다양한 분야에서 활용되며, 소프트웨어 개발에서는 사용자 인터페이스(UI) 컴포넌트, 데이터베이스 접근 컴포넌트, 네트워킹 컴포넌트 등 다양한 종류의 컴포넌트가 있다. 이러한 컴포넌트들을 조합하여 큰 시스템을 구축하고 관리하는 것이 가능하다. 컴포넌트의 주요 특징 (1) 재사용성 컴포.. 2023. 8. 17. <h>에 버튼 속성을 부여하면 .. 🤔 오늘의 에러 React로 코드를 짜던 중, 오늘은 아래와 같은 콘솔 에러를 만났다. Received `true` for a non-boolean attribute `button`. If you want to write it to the DOM, pass a string instead: button="true" or button={value.toString()}. 🧐 처음 작성한 코드 처음에는 요소에 button 속성을 부여해, 클릭하면 모달이 나타나고 다시 클릭하면 모달이 없어지도록 했다. 이 부분이 문제였다. { title.map(function(a, i){ return ( {/* 이 부분 수정 필요 */} { setModal(!modal); setModalTitle(i) }}>{ title[i] .. 2023. 5. 22. Route, Routes를 BrowserRouter로 감싸주지 않으면.. 🤔 오늘의 에러 React로 코드를 짜던 중, 오늘은 아래와 같은 에러를 만났다. TypeError: Cannot read properties of undefined (reading 'pathname') 해당 에러에 대한 GPT의 답은 아래와 같았다. 이 에러는 React 애플리케이션에서 'pathname' 속성을 갖는 객체를 참조하려고 할 때 해당 객체가 정의되지 않은 경우 발생합니다. 'pathname'은 일반적으로 브라우저의 URL 경로를 나타내는 속성입니다. 일반적으로 이 에러는 다음과 같은 상황에서 발생할 수 있습니다: 1. 브라우저 라우터 오류: React Router 또는 다른 라우팅 라이브러리를 사용하는 경우, 브라우저 라우터가 초기화되지 않았거나 잘못 구성되어 'pathname' 속성이 .. 2023. 5. 19. [🍔 맛집 공유 사이트] 리액트로 CRUD 구현하기 🛠️ 구현할 기능 웹 사이트 내에서 사용자들이 자유롭게 맛집 추천 글을 올릴 수 있는 기능을 구현하고 싶다. As-Is: 현재는 기존에 올라온 글을 볼 수 있기만 함 ➡️ To-be: 맛집 제보 버튼을 클릭하면 글을 Create, Read, Update 그리고 삭제 버튼을 누르면 Delete 할 수 있다. 💡 구현 과정 - Create 1. input 칸을 만든다. input의 타입은 아래와 같이 다양하니 골라서 활용해 보자. // 순서대로 or 그냥 2. onChange 이벤트 핸들러를 활용한다. onChange 또는 onInput라는 이벤트 핸들러를 사용해 사용자가 에 무언가 입력 시, 중괄호 안에 있는 코드가 실행되도록 한다. {console.log("사용자가 입력하면 나타나는 내용")}} /> 아.. 2023. 5. 16. [🍔 맛집 공유 사이트] 모달창 같은 동적인 UI 만들기 🛠️ 구현할 기능 성수역, 강남역, 압구정역 총 세 개의 제목이 있고 현재 띄워지는 모달창에는 제목이 압구정역으로만 보이는데, 각 제목을 클릭하면 그에 맞는 모달창을 띄우고 싶다. 예를 들어, 성수역 제목을 클릭하면 성수역 맛집을 소개하는 모달창이 띄워지도록 말이다. As-Is: 3개의 제목이 있으나 현재는 모달창에 1개의 제목으로만 뜸 ➡️ To-be: 각 제목을 클릭하면 해당 제목을 가진 모달창을 띄우고 싶음 🧐 처음 작성한 코드 처음에는 제목당 1개씩 총 3개의 state를 만들어 주어야 하나, 아니면 타이틀 인덱스에 맞게 props를 내려주어야 하나 생각했다. 일단은 modalTitle이라는 state를 생성해주고, 삼항연산자 안에 넣어주었다. import './App.css'; import lo.. 2023. 5. 11. React 초보를 위한 리액트 시작하기 ✅ 이 글은 mac OS & VScode 사용자에게 맞춰져 있는 점 참고 바랍니다. 1. iterm or Terminal에서 디렉토리 만들기 # mkdir 명령어로 프로젝트를 시작하려는 폴더에서 디렉토리를 만든다. yeonsuchoi@Ella-iMac Workspace % mkdir React # cd 명령어로 만들었던 디렉토리 안에 들어간다. (생략 가능) yeonsuchoi@Ella-iMac Workspace % cd React 2. 리액트 설치하기 # 디렉토리 안에서 npx create-react-app {디렉토리명} 을 입력한다. # 단, 아래와 같이 디렉토리 명을 대문자로 입력하면 아래와 같은 에러 코드가 뜬다. yeonsuchoi@Ella-iMac React % npx create-react.. 2023. 4. 27. React 컴포넌트의 key 속성에 대해 설명해 주세요. 👩🏻💻 React 컴포넌트의 key 속성에 대해 설명해 주세요. React에서 리스트 형태로 컴포넌트를 렌더링 할 때, key 값을 넣어달라는 console 에러가 자주 뜨는데요. 이때 이 key 값이 어떠한 역할을 할까요? 💁🏻♀️ 요약하자면 , key는 React가 어떤 항목을 변경하거나 추가할지 또는 삭제할지 구별하도록 돕는 역할을 합니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. key 속성은 같은 컴포넌트를 여러 번 렌더링할 때, 다른 컴포넌트임을 구분하기 위해 사용하는 속성인데요. 예를 들어, 10개의 트윗 중 하나의 트윗만 변경되었을 때 해당 트윗만 재렌더링하고, 다른 9개의 트윗은 그대로 둘 수 있습니다. 이렇게 key 속성을 활용하.. 2023. 4. 10. React의 props와 state에 대해 설명해 주세요. 👩🏻💻 React에서 props와 state의 차이점은 무엇인가요? 💁🏻♀️ 요약하자면 , props와 state는 모두 JavaScript의 객체이며 두 객체 모두 렌더링 후 결과물에 영향을 주는 정보들을 가지고 있지만, 한 가지 차이가 있습니다. props는 외부로부터 전달받은 값으로 변할 수 없는 값인 반면, state는 함수 컴포넌트 내부에서 변화하는 값입니다. 각 특징으로는, (1) props - React에서 컴포넌트는 부모 컴포넌트로부터 props를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가합니다. - 데이터의 뿌리가 자기 자신이 아닌, 즉 외부로부터 전달받기에 함부로 변하지 않는 값인 읽기 전용 값입니다. (2) state - 자기 자신의 컴포넌트에서 만들어 낸 데이터이.. 2023. 4. 4. Library vs. Framework 차이점을 확실하게 정리하기 0. 들어가기에 앞서 누군가 나에게 라이브러리와 프레임워크 간의 차이를 물어본다면 한 마디로 정리할 수 있을까? 답은 아니었다. 개발을 공부하다 보면 이 세 가지를 순차적으로 배우지만 결론적으로 각각이 무엇인지, 차이는 또 무엇인지 모른다면 확실하게 짚고 넘어가보자. 1. 라이브러리(Library) 란? Library는 단어 그대로 도서관이다. 응용 프로그램 개발을 위해 필요한 기능(함수)들을 모아 놓은 소프트웨어다. 비유하자면, 자동차가 굴러갈 때 ( = 프로그램이 제작되어 돌아갈 때) 필요한 바퀴, 헤드라이트, 에어백 등이라고 할 수 있다. 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것이다. 가.. 2023. 4. 2. 이전 1 다음
