React

// TODO : 이미지와 함께 화면에 출력하세요 // TODO : 변수 (title="제목" publisher="출판사" // TODO : author="작자" stock="재고") 를 만들어서 화면에 출력하세요(useState()) 풀이 App.js 부분(부모 컴포넌트) import A_Comment from "./pages/A_Comment"; import B_Comment_Exam from "./pages/B_Comment_Exam"; function App() { return ( {/* 자식 컴포넌트 추가 */} {/* */} ); } export default App; B_Comment_Exam.js 부분 (자식 컴포넌트) // B_Comment_Exam.js : 자식(연습문제) // rfce..

// A_Lifecycle.js : 자식 컴포넌트 // 컴포넌트 단축키 : rfce // TODO: 리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 import React from 'react' import { useEffect, useState } from 'react'; // 컴포넌트 : 함수 컴포넌트(클래스 컴포넌트(과거)) // es6 : ECMAscript == 모던자바스크립트 function A_Lifecycle() { // 변수와 함수를 정의하는 부분 // TODO: 변수 정의 : 바인딩 함수 // TODO: 사용법 : let [변수명, set변수명] = useState("초기값"); // TODO: set변수명() : 수정함수(setter 함수) let [element, set..

React에서 CSS 적용은 어떻게 할까? 1. 우선 자식 컴포넌트를 생성해줍니다. 2. 자식 컴포넌트 이름과 똑같은 css 파일을 따로 생성해줍니다. 3. css 파일을 자식 컴포넌트에 import 시켜줍니다. // D_ImportComp.js : 자식컴포넌트 // TODO: 리액트 컴포넌트 디자인 적용하기 : css 파일 적용 // TODO: 1) css 파일 준비해서 import 하면 적용됨 // TODO: 프로젝트가 커질수록 디자인 클래스선택자들이 중첩될 수 있음 // TODO: 예) A 사람 css : .alpha, B 사람 css : .alpha, // p : 노란색 p : 파란색 // TODO: 2) 공통 디자인 적용 : 태그선택자 등을 자유롭게 코딩 // TODO: 3) 클래스/id 선택자..

JSX는 편리한 문법이지만 올바르게 사용하기 위해 규칙을 따라야 합니다. 요소는 감싸져 있어야 한다. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다. 지난번 hello-react 프로젝트의 src 폴더 안 App.js 파일을 열어보겠습니다. function App() { return ( Hello React!! 안녕하세요 주녘입니다. ); } export default App; 이러한 형태의 코드는 작동하지 않습니다. 터미널을 열어 웹 브라우저에서 확인해 볼까요? 이러한 오류는 요소들이 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생한 것입니다. 이러한 오류 수정은 아래 코드와 같이 작성하면 해결됩니다. function App() { return ( Hello Rea..

props? props는 "properties"를 줄인 표현어로 컴포넌트 속성을 설정할 때 사용하는 요소라고 합니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. JXS에서 props 렌더링 우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name 이라는 props를 렌더링하도록 설정해봅시다. function MyComponent(props) { return ( 안녕하세요, 저는 {props.name} 입니다. ) } export default MyComponent 부모 컴포넌트에서 props값 지정하기 부모 컴포넌트인 App.js 에서 MyComponent의 props 값을 지정해봅시다. import "./App.css"; import MyCo..

들어가기 전에 컴포넌트 파일에서 웹브라우저 화면에 표시되는 영역은 함수의 return 값 아래 부분에 작성해주어야 화면에 정상적으로 출력이 됩니다. function Home() { // TODO: 변수를 정의하는 곳 : 여기 let array = ["a", "b", "c"]; // 일반 변수 // 리액트 특징 : 변수값 + html 태그를 같이 사용이 가능함(JSX 표현식) let input = 문자열 출력되나요?; // TODO: 함수를 정의하는 곳 : 여기 // 함수선언식 : function 함수명() {} // 함수표현식 : let 함수명 function (){}; // 화살표함수 : let 함수명 () => {} // 화살표함수 단축키 : nfn const testFunc = () => { ret..

React를 시작하기 전에! React를 시작하기 전에 작업 환경 설정을 해주어야 합니다. 순서는 다음과 같습니다. Node.js / npm 설치 -> vs code에서 create-react-app 으로 프로젝트 만들기 Node.js 설치해보기 1) Node.js 설치 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 합니다. 이것으로 웹 브라우저 환경이 아닌 곳에서 자바스크립트를 사용하여 연산할 수 있게 만들어줍니다. Node.js 홈페이지에서 LTS 버전을 다운받아 설치해주면됩니다. npm install 하기 2) npm 설치하기 Node.js를 설치하셨다면 npm을 설치해봅시다. npm은 Node.js 패키지 매니저 도구입니다. VS Code에서 터미널을 실행시키고 다음과 같이 명..