React52 [리액트] props란 무엇일까? (부모 컴포넌트, 자식 컴포넌트) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.3 props Props props란 자식 컴포넌트의 속성을 설정할 때 부모 컴포넌트에서 전달해주는 데이터를 의미한다. 예제를 살펴보기 전에 부모 컴포넌트와 자식 컴포넌트의 개념부터 알아보자. 부모 컴포넌트: 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트: 부모 컴포넌트에게서 불려온 컴포넌트 부모 컴포넌트 부모 컴포넌트(App)에서 자식 컴포넌트(MyComponent)를 불러오고 자식 컴포넌트의 속성을 name={"React"} 설정하였다. 이때 자식 컴포넌트(MyComponent)에서 props 객체를 전달하게 되고 그 객체 안에 name: "Re.. 2022. 3. 23. [리액트] 컴포넌트 선언하기, 모듈 내보내기, 불러오기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.2 첫 컴포넌트 생성 컴포넌트 선언하기 리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트로 총두가지 컴포넌트가 있다. 두 컴포넌트에 대해 더 자세히 알아보고 싶다면 👉 [리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?) 컴포넌트를 생성할때는 일반적으로 components라는 폴더안에 넣는다. src폴더 안에 components 폴더를 만든 후 FirstComponent.jsx라는 파일을 만들어보자. 컴포넌트 파일은 .js와 .jsx 둘다 가능하다. 나는 순수한 자바스크립트 파일과 JSX문법을 사용해 만든 컴포넌트파일을 구분하기 위해 파일확장자.. 2022. 3. 23. [리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 1.3 작업 환경 설정 리액트 프로젝트를 생성하기 전에 필요한 도구 1. 터미널 터미널은 그래픽 유저 인터페이스(GUIs) 없이 컴퓨터에 명령을 내릴 수 있는 도구다. 여기서 그래픽 유저 인터페이스는 전자기기의 UI를 그래픽화시켜 일반 사용자들이 컴퓨터에게 쉽게 명령을 내릴 수 있게 하는 방식이다. 우리가 친구에게 메시지를 보낼때 전송버튼을 눌러 보낸다. 이때 버튼이라는 UI가 메시지를 전송하게 하는 기능을 가진 GUI 그래픽 유저 인터페이스다. 2. Node.js Node.js는 자바스크립트를 서버에서 실행할 수 있게하는 자바스크립트 엔진이다. 리액트에.. 2022. 3. 23. [리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.1 클래스형 컴포넌트 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다. 또한 컴포넌트 내부에서 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount)의 작업을 처리할 수 있다. 리액트에서 컴포넌트는 두가지 방식으로 선언할 수 있는데 클래스형태로 컴포넌트를 선언하는 방식과 함수형태로 컴포넌트를 선언하는 방식이 있.. 2022. 3. 23. [리액트 에러] 리액트 에러메세지 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? ⚠️ 에러내용 Warning: Invalid DOM property `for`. Did you mean `htmlFor` ❓ 에러발생이유 리액트에서는 자바스크립트과 유사한 JSX문법을 사용한다. 자바스크립트에서는 for가 반복문을 사용할 때 쓰는 예약어이므로 HTML의 속성 이름(attribute name)으로 사용할 수 없다. ❗️ 해결방법 과 같은 태그에서 for 속성 이름을 사용해야할 때는 htmlFor를 대신 사용해준다. import React from 'react'; const RadioButton = ({ foundingDate }) => { const { id, name, label } = foundingDate; return ( {label} ); }; export default Radio.. 2022. 3. 23. [리액트] JSX 문법 9가지 완벽 정리 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 2장 JSX 2.1 코드 이해하기 2.2 JSX란? 2.3 JSX의 장점 2.4 JSX 문법 JSX JSX는 JavaScript XML로 HTML 문법을 사용할 수 있는 자바스크립트 파일을 의미한다. 확장된 자바스크립트 문법이지만 HTML과 비슷하게 생겼기 때문에 사용하기가 쉽다. 일반 자바스크립트가 아니기 때문에 번들링(파일을 하나로 합치는) 과정에서 바벨을 사용하여 일반 자바스크립트로 변환해야한다. JSX 문법을 사용한 코드 function App() { return ( Hello React ) } JSX를 Babel을 사용해 일반 자바스크립트로 변환한 코드 fun.. 2022. 3. 23. [리액트] CRA(create react app)으로 리액트 프로젝트 생성하기 CRAcreate react app은리액트로 프로젝트를 시작하기 위해 필요한 환경을 모두 구축해주는 코드다. (웹팩, 바벨의 설치 등) create react app으로 프로젝트를 생성하기전에 리액트에 필요한 도구들이 설치되었는지 꼭 확인해보자 👉 [리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구 create react app으로 프로젝트 생성하기 1. 설치 yarn으로 설치 $ yarn create react-app npm으로 설치 $ npx create-react-app 여기서 npx는 npm과 함께 설치 되는 노드 패키지를 실행하는 툴이다. 만약 프로젝트 이름으로 된 폴더를 이미 만들었다면 해당 폴더로 접근한 후 아래의 코드를 입력한다. $ yarn create react-app . 2. 디.. 2022. 3. 23. [리액트 에러] yarn start시 error Command failed with exit code 127 해결방법 ⚠️ 에러 내용 yarn start 명령어로 리액트 프로젝트를 실행했을 때 에러 메시지 "error Command failed with exit code 127"가 나타난다. ❓ 에러 이유 리액트 프로젝트를 깃허브에서 처음 클론해올때 node_modules는 다운로드 되지 않아 리액트 프로젝트가 제대로 실행되지 않는다. ❗️ 해결 방법 $ yarn install 패키지 매니저(npm, yarn)을 통해 설치한 모듈을 yarn install 명령어로 다운로드해준다. 이때 설치한 모듈의 정보는 package.json에 명시가 되어 있다. 🙂 결과 node_modules가 설치되면 yarn start 명령어를 입력해 프로젝트를 실행하면 에러메세지가 나오지 않는다. 2022. 3. 19. [리액트/한줄정리] A || B와 A && B의 차이 A || B A가 false면 B를 실행해라 A의 값이 있으면 A를 넣고 A의 값이 없으면 B를 넣어라 A && B A가 true면 B를 실행해라 A의 값이 있으면 B를 넣는다 2022. 3. 11. [리액트] 리액트에서 자주 나오는 용어 정리 (컴포넌트, 모듈, 번들러, 웹팩, 바벨, 렌더링) 1. 컴포넌트(Component) 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다. 또한 컴포넌트 내부에서 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount)의 작업을 처리할 수 있다. 2. 모듈(Module) 모듈이라는 단어는 모듈화 프로그래밍이라는 소프트웨어 디자인 기법에서 나온 말이다. 모듈화 프로그래밍이란 프로그램을 개발할 때 코드를 독립적이고 재사용할 수 있는 작은 모듈로 이루어지게 해야한다는 컨셉이다. 즉, 모듈이란 프로그램을 이루고 있는 독립적이고.. 2022. 2. 24. [리액트] Virtual DOM이란? (브라우저 동작 원리) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술: 1장 리액트 시작 1.1 왜 리액트인가? 1.2 리액트의 특징 1.3 작업 환경 설정 리액트 기초반 2-1 라이프 사이클이란? ❗️이 포스팅은 DOM의 개념을 설명하지 않습니다. DOM을 모르시는 분은 DOM을 먼저 공부하세요❗️ 1. Virtual DOM의 필요성 규모가 큰 웹 애플리케이션은 브라우저에서 DOM의 변화가 일어났을때 처리하는 과정이 느리다. Virtual DOM이 필요한 이유는 바로 여기에 있다. 여기서 잠깐, 왜 일반 DOM은 처리하는 속도가 더 느릴까? 그 이유는 웹브라우저가 DOM을 읽고 출력.. 2022. 2. 24. [리액트] 리액트란 무엇인가? (MVC패턴, 리액트의 장점, 리액트로 만든 웹사이트 소개) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 1장 리액트 시작 1.1 왜 리액트인가? 1.2 리액트의 특징 1.3 작업 환경 설정 1. 리액트란? 리액트란 페이스북이 개발한 자바스크립트 라이브러리다. 리액트를 사용해 컴포넌트를 기반으로한 Single Page Application(SPA)을 만들 수 있다. 여기서 컴포넌트와 Single Page Application이라는 말이 이해가 되지 않는다면 아래의 내용을 확인해보자. 1.1 컴포넌트란? 여기서 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아.. 2022. 2. 23. 이전 1 2 3 다음
