전체 글67 [React / error] Expected an assignment or function call and instead saw an expression no-unused-expressions 에러 발생 리액트로 todolist를 만들던 도중, map함수를 사용하면서 에러가 발생했다. 원인 코드 => return이 누락되어서 생긴 오류 해결방법 1. map() 함수 안에서 중괄호를 사용할 경우 return을 해줘야 한다. 2. 리턴문이 한 줄일 경우 중괄호와 return을 생략하고 사용할 수 있다. 화살표 함수 주의 사항 화살표 함수의 경우, 리턴문이 한 줄일 경우, ()로 감싸진 부분이 자동으로 return이 된다. const titleChange = (event) => { setTitle(event.target.value); }; 하지만, 중괄호{}로 감싸진 함수는 return문이 없으면, return 값을 반환하지 않아 에러가 발생한다! 따라서, 화살표 함수 안, 중괄호를 사용할 경우 반.. 2023. 4. 19. [React/Warning]Each child in a list should have a unique " key" prop. 🚨 문제점 map함수를 사용하여 화면을 구현한경우, 콘솔창에서 " Warning: Each child in a list should have a unique "key" prop "이라는 문구를 확인할 수 있다.(물론 페이지는 문제없이 작동된다.) 리액트에서 map을 사용하여 컴포넌트를 반복 렌더링 할 때는 반드시 컴포넌트에 독립적인 key값을 넣어줘야 한다. key가 필요한 이유는 React에서 key prop을 컴포넌트 배열을 렌더링했을 때 각각의 원소에서 변동이 있는지 알아내려고 사용하기 때문이다. 만약 key가 없다면 React는 가상돔을 비교하는 과정에서 배열을 순차적으로 비교하면서 변화를 감지하려 합니다. 하지만 key가 있으면 이 값을 이용해서 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있게.. 2023. 4. 18. [React] Props란, Props Children 🛫 Props란? - 프로퍼티, props(properties의 줄임말) - 부모 컴포넌트에서 자식 컴포넌트에게 물려준 데이터, 즉 컴포넌트간의 정보 교류 방식 - props는 반드시 위에서 아래(부모에서 자식)방향으로만 흐른다(단방향 메커니즘) - props는 반드시 읽기 전용이며, 자식 컴포넌트에선 변경할 수 없다. 🛫 Props로 값 전달 props는 부모 컴포넌트가 자식컴포넌트에게 넘겨준 데이터들의 묶음 props는 object literal 형태 - {key: "value"} 데이터 형태 //App.js import React from "react"; function App() { return ; } function Mother() { const name = '홍부인'; return ; // 💡.. 2023. 4. 18. [React] CRA란? CRA로 리액프 트로젝트 생성하기 📁 CRA란? 리액트 공식문서에서 정의하고 있는 CRA는 다음과 같다. Create React App : Set up a modern web app by running one command. [출처 : 공식문서] 즉, 한 줄의 명령어를 입력함으로써 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다. 📁 CRA로 프로젝트 생성하기 리액트 프로젝트를 생성하고 싶은 폴더로 이동 cd 디렉토리명 yarn create react-app 프로젝트명 실행 (npm 사용시, npm init react-app 프로젝트명 실행) 프로젝트 생성 완료! 사진과 같이 해당 경로로 이동했을 때 프로젝트명으로 데렉토리가 생성되었으면 끝! 📁 CRA로 생성한 프로젝트 실행하기 1. 터미널에서 해당 디렉토리로 이동 cd.. 2023. 4. 18. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음
