1. 폴더 구조 2. Comment.jsx import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText: { color: "black", fon..

1. 개요 이번 장에서는 컴포넌트를 합치고 잘게 쪼개는 방법에 대해서 배우겠다. 아시다시피 React의 신념은 '레고처럼 조립' 이다. 여기서 레고의 역할을 하는 것이 컴포넌트이다. 그때 그때 입맛에 맞는 컴포넌트를 붙이고 떼고를 반복해서, 원하는 모양을 조립하면 된다. 그 레고를 붙이고 떼는 법을 배우자. 2. Component 합성 위와 같이 하나의 큰 컴포넌트를 만들기 위해 작은 컴포넌트들을 조합하는 행위를 컴포넌트 합성이라 한다. 예제에서는 하나의 컴포넌트를 여러번 썼지만, 각기 다른 컴포넌트를 합쳐도 된다. 3. 컴포넌트 추출 컴포넌트 추출은 너무 큰 컴포넌트를 재사용성을 위해서 여러 작은 컴포넌트로 잘게 쪼개는 작업을 의미한다. 큰 컴포넌트로 들어오는 props 중 일부를 다시 props로 받..

1. 개요 이제 컴포넌트, React Elements, DOM Elements에 대한 개념적 이해는 저번 포스팅들을 통해 잡혔을 것이다. 이제는 컴포넌트를 진짜 사용하기 위해 컴포넌트의 종류와 그것을 만드는 방법에 대해 알아보겠다. 2. 컴포넌트의 종류 컴포넌트의 종류에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 클래스형 컴포넌트는 쓰는 방법이 복잡하고 어렵다는 의견이 많아서 요즘 자주 사용되는 것은 함수형 컴포넌트이다. 함수형 컴포넌트는 말 그대로 함수 형태로 되어있다. 다음 예시를 보자. 이거 말고 익명 함수 형태로 써도 된다. const Welcome = (props) => { //... } 클래스형 컴포넌트는 우리가 자바 같은 객체지향 언어를 쓸 때 확인할 수 있는 형태 그대로 이다. 다..

1. 개요 여기서는 Props의 특징과 사용법에 대하여 알아보겠다. 2. Props의 특징 Props의 가장 중요한 특징은 READ_ONLY 라는 특징이다. 읽기 밖에 못한다라는 말은 다시 말해 "값을 변경할 수 없다."라는 의미이기도 하다. 저번 포스팅에서 컴포넌트를 붕어빵 틀, 거기서 나온 Elements를 붕어빵, Props를 붕어빵 속 재료로 표현했는데, 이미 만들어진 붕어빵 속 재료를 바꿀 수 없는 것과 같은 이치이다. 만약 사용자 입력으로 새로운 화면을 그려야 한다면, 새로운 Props를 만들어 컴포넌트에 넣고 새로운 Elements를 Re-Rendering 하여 화면에 띄워야 한다. 그러니까, 새로운 붕어빵이 먹고 싶으면 손에 쥔 붕어빵을 버리고 새로 구워달라 해야한다는 것이다. 이 특징을 ..

1. 개요 React는 Component-Based Language이다. 따라서 컴포넌트라는 개념자체가 매우 중요하다. 또 함수에서 인수의 역할을 Component에서는 Props라는 녀석이 한다. 따라서 Component가 중요해진 만큼 Props에 대한 개념 이해도 중요해진다. 같이 살펴보자. 2. Component에 대하여 Component란 하나의 기능을 하는 JavaScript Code를 의미한다. 컴포넌트가 함수와 형태가 매우 유사한데, 이는 하나의 기능이 의미가 있으려면 입력을 받아 특정 결과값을 출력 해야하는데, 그래서 컴포넌트의 형태가 함수를 따라간게 아닌가 싶다. 기본적인 JavaScript의 함수와 차이점이 있다면 당연히 입력을 받는 값과, 출력하는 값이 다르다는 것이다. 함수는 당연..

1. 코드 작성 먼저 화면 계층 구조 chapter_04를 만들고 Clock이라는 jsx를 만든다. ⓐ Clock.jsx 생성 import React from "react"; const Clock = (props) => { return ( 안녕 리액트! 현재 시간: {new Date().toLocaleTimeString()} ) } export default Clock; 해당 함수는 시간을 찍는 함수이다. ⓑ index.jsx 변경 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals..

1. React Elements의 특징에 대하여 React의 랜더링 과정과 원리에 대해서 다루기 위해서는 먼저 React Elements의 특징에 대하여 알아야 한다. 이전 포스팅에서 다룬 바와 같이, React Elements는 불변성을 가진다. Elements의 불변성이란, Elements 생성 후에는 Elements 속 children이나 attributes를 바꿀 수 없다! 이다. 그러면 다음과 같은 질문이 나올 수가 있다. 어? 그렇다면, 사용자의 입력에 따라 화면을 갱신해야할 경우는 어떻게 해야하나요? 화면 속 Dom Elements의 원본인 React Elements가 불변성이면, 갱신을 구현할 수 없지 않나요? 좋은 질문이다! 분명 React Elements는 불변하지만, 앞에 조건이 붙었..

0. 개요 본 포스팅에서는 ⓐ React Element란 무엇인가? ⓑ 그것이 어떻게 DomElement로 변환되어 랜더링되는지 에 대해서 알아보겠다. 1. React Element란? (0) Element에 대하여 먼저 Element가 무엇인지 알아보겠다. Element의 사전적 의미는 '물체를 구성하는 성분'을 뜻한다. Html을 공부하면서 DomElement에 대해 들어 봤을 것이다. DOM Element는 화면을 구성하는 하나의 성분을 의미한다. 예를 들어 설명하겠다. 위의 화면을 F12 개발자 모드로 둘러보면 다음과 같다. 여기서 Div 태그 하나하나, 혹은 그 Div 태그 속 h1, h2 태그 하나하나가 화면을 구성하는 성분 중 하나임으로 DOM Element에 해당한다. ⓑ 그렇다면 Reac..

1. 개요 지금까지 JSX에 대한 이론을 간단하게 정리하였다. 이제 JSX 문법을 이용한 간단한 실습을 하고자 한다. create-react-app 을 이용하여, react에 대한 기본적인 스켈레톤 코드를 받고 그 src 폴더 밑에 Chapter_03이라는 폴더를 하나 만든다. 그리고 위와 같이 Book.jsx 와 Library.jsx 파일을 하나씩 만들겠다. 2. Book.jsx import React from "react"; function Book (props) { return ( {`이 책의 이름은 ${props.name} 입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`} ); } export default Book; 코드에 대한 설명을 하겠다. Book이..

1. JSX의 장점 ⓐ 간결해진 코드 > 높은 가독성 > 오류 잡기 쉬움 저번 포스팅에서 말했듯이, JSX를 쓰면 하나의 JSX 코드 내에서 JS와 HTML 코드를 혼용해서 사용할 수 있었다. 이는, JS 로직과 그것을 연결하려고 하는 HTML 요소를 특정하는 로직을 한번 더 작성할 필요가 없기 때문에 코드가 짧아지고, 간결해진다. 이는 엄청난 장점이다. ⓑ Injection attack 해킹 방어에 용이 이건 그렇게 와닿는 내용이 아니라서 깊게 듣지는 않았다. JSX를 쓰면 해당 주입성 공격을 방어하기 더 용이하다고 한다. 2. JSX 사용법 ⓐ HTML 요소를 하나의 JS 변수로 사용한다. const element1 = Hello World!! 요렇게 하나의 요소를 변수로 특정이 가능하다. 당연히 해..

1. JSX의 정의 원래 프론트 코드는 화면을 띄우는 HTML, 그 HTML을 꾸미는 CSS, 프리젠테이션 로직을 담당하는 JS 총 3가지로 나뉜다. 이렇게 영역을 구분하여 작성하는 것은 때때로, 피로감을 유발한다. 왜냐하면, JS로 만든 모듈(특정 기능을 하는 코드)을 연결할 특정 HTML 요소(elements)와 연결하는 작업을 항상 해줘야하기 때문이다. 해당 작업을 위해 따로 코드를 작성해야 하기에 가독성이 더욱 안 좋아진다. JSX는 JavaScript & XML/HTML의 약자로, 위에서 보여진 프론트 엔드 전반의 약점을 보완하기 위해 만들어진 개념이다. JSX에서는 Javascript 코드 안에서 HTML 코드를 작성하는 것이 가능하다. 따라서 밑과 같은 코드 작성이 가능해진다. const e..

48- 틀림1

20221124 - 6,8,9,13,26,34,35,17, 23,24, 46

1. guest of honor: 행사의 주가 되는 손님2. cater: 음식을 제공하다.1) most of our work now involves catering for wedding 이제 우리 일의 대부분이 웨딩에 음식을 공급하는 것과 관련이 있다.2) (음식을 제공하다는 뜻이 구미를 맞춘다는 뜻으로도 쓰임.)They only publish novels which cater to the mass-market. 그들은 오직 대중 시장에 구미를 맞춘 소설만 출판한다.3. lucheon: 오찬 a charity luncheon - 자선행사 오찬4. stroll -한가로이 거닐다.How about a stroll in the park?Nothing too strenuous 공원을 거니는 건 어때요? 힘든 건..