본문 바로가기

프론트엔드 개발/React - 이론

[실습] 댓글 컴포넌트 만들기 (리액트) 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.. 더보기
Component 합성과 추출 1. 개요 이번 장에서는 컴포넌트를 합치고 잘게 쪼개는 방법에 대해서 배우겠다. 아시다시피 React의 신념은 '레고처럼 조립' 이다. 여기서 레고의 역할을 하는 것이 컴포넌트이다. 그때 그때 입맛에 맞는 컴포넌트를 붙이고 떼고를 반복해서, 원하는 모양을 조립하면 된다. 그 레고를 붙이고 떼는 법을 배우자. 2. Component 합성 위와 같이 하나의 큰 컴포넌트를 만들기 위해 작은 컴포넌트들을 조합하는 행위를 컴포넌트 합성이라 한다. 예제에서는 하나의 컴포넌트를 여러번 썼지만, 각기 다른 컴포넌트를 합쳐도 된다. 3. 컴포넌트 추출 컴포넌트 추출은 너무 큰 컴포넌트를 재사용성을 위해서 여러 작은 컴포넌트로 잘게 쪼개는 작업을 의미한다. 큰 컴포넌트로 들어오는 props 중 일부를 다시 props로 받.. 더보기
Component의 종류와 만드는 방법 1. 개요 이제 컴포넌트, React Elements, DOM Elements에 대한 개념적 이해는 저번 포스팅들을 통해 잡혔을 것이다. 이제는 컴포넌트를 진짜 사용하기 위해 컴포넌트의 종류와 그것을 만드는 방법에 대해 알아보겠다. 2. 컴포넌트의 종류 컴포넌트의 종류에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 클래스형 컴포넌트는 쓰는 방법이 복잡하고 어렵다는 의견이 많아서 요즘 자주 사용되는 것은 함수형 컴포넌트이다. 함수형 컴포넌트는 말 그대로 함수 형태로 되어있다. 다음 예시를 보자. 이거 말고 익명 함수 형태로 써도 된다. const Welcome = (props) => { //... } 클래스형 컴포넌트는 우리가 자바 같은 객체지향 언어를 쓸 때 확인할 수 있는 형태 그대로 이다. 다.. 더보기
Props에 대하여 (리액트) 1. 개요 여기서는 Props의 특징과 사용법에 대하여 알아보겠다. 2. Props의 특징 Props의 가장 중요한 특징은 READ_ONLY 라는 특징이다. 읽기 밖에 못한다라는 말은 다시 말해 "값을 변경할 수 없다."라는 의미이기도 하다. 저번 포스팅에서 컴포넌트를 붕어빵 틀, 거기서 나온 Elements를 붕어빵, Props를 붕어빵 속 재료로 표현했는데, 이미 만들어진 붕어빵 속 재료를 바꿀 수 없는 것과 같은 이치이다. 만약 사용자 입력으로 새로운 화면을 그려야 한다면, 새로운 Props를 만들어 컴포넌트에 넣고 새로운 Elements를 Re-Rendering 하여 화면에 띄워야 한다. 그러니까, 새로운 붕어빵이 먹고 싶으면 손에 쥔 붕어빵을 버리고 새로 구워달라 해야한다는 것이다. 이 특징을 .. 더보기
Component에 대하여 (리액트) 1. 개요 React는 Component-Based Language이다. 따라서 컴포넌트라는 개념자체가 매우 중요하다. 또 함수에서 인수의 역할을 Component에서는 Props라는 녀석이 한다. 따라서 Component가 중요해진 만큼 Props에 대한 개념 이해도 중요해진다. 같이 살펴보자. 2. Component에 대하여 Component란 하나의 기능을 하는 JavaScript Code를 의미한다. 컴포넌트가 함수와 형태가 매우 유사한데, 이는 하나의 기능이 의미가 있으려면 입력을 받아 특정 결과값을 출력 해야하는데, 그래서 컴포넌트의 형태가 함수를 따라간게 아닌가 싶다. 기본적인 JavaScript의 함수와 차이점이 있다면 당연히 입력을 받는 값과, 출력하는 값이 다르다는 것이다. 함수는 당연.. 더보기
React 랜더링 과정에 대한 실습 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.. 더보기
React의 랜더링 원리와 과정 1. React Elements의 특징에 대하여 React의 랜더링 과정과 원리에 대해서 다루기 위해서는 먼저 React Elements의 특징에 대하여 알아야 한다. 이전 포스팅에서 다룬 바와 같이, React Elements는 불변성을 가진다. Elements의 불변성이란, Elements 생성 후에는 Elements 속 children이나 attributes를 바꿀 수 없다! 이다. 그러면 다음과 같은 질문이 나올 수가 있다. 어? 그렇다면, 사용자의 입력에 따라 화면을 갱신해야할 경우는 어떻게 해야하나요? 화면 속 Dom Elements의 원본인 React Elements가 불변성이면, 갱신을 구현할 수 없지 않나요? 좋은 질문이다! 분명 React Elements는 불변하지만, 앞에 조건이 붙었.. 더보기
ReactElement란 무엇인가 0. 개요 본 포스팅에서는 ⓐ React Element란 무엇인가? ⓑ 그것이 어떻게 DomElement로 변환되어 랜더링되는지 에 대해서 알아보겠다. 1. React Element란? (0) Element에 대하여 먼저 Element가 무엇인지 알아보겠다. Element의 사전적 의미는 '물체를 구성하는 성분'을 뜻한다. Html을 공부하면서 DomElement에 대해 들어 봤을 것이다. DOM Element는 화면을 구성하는 하나의 성분을 의미한다. 예를 들어 설명하겠다. 위의 화면을 F12 개발자 모드로 둘러보면 다음과 같다. 여기서 Div 태그 하나하나, 혹은 그 Div 태그 속 h1, h2 태그 하나하나가 화면을 구성하는 성분 중 하나임으로 DOM Element에 해당한다. ⓑ 그렇다면 Reac.. 더보기

티스토리툴바