# React Component

16개의 포스트
post-thumbnail

React 시작하기

React란? 는 에서 제공해주는 프론트엔드 이다. 는 기반으로 되어 있어 에 데이터를 내려주면 개발자가 설계한 대로 UI가 만들어져 사용자에게 보여진다. 리액트을 사용하지 않아도 html과 css로 충분히 화면을 만들수 있다! 그러나 html과 css로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합합지 ❌ 리액트를 이용하면 사용자와 상호작용할 수 있는 UI를 손 쉽게 만들어 줄 수 있다! ❕❕따라서 동적인 화면을 만들기 위함❕❕ Component란? 리액트는 컴포넌트 기반의 라이브러리이다 특정 코드 뭉치를 다른 부분으로 인식하거나 재사용하기 위해 사용하는 코드를 블록단위를 말한다. 쉽게 말해, UI를 하나의 로 생각한다면 는 그 덩어리를 이루는 이라고 생각하면 된다! 따라서 작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있기 때문에 똑같은 코드를 반복적으로 입력할 필요가 없어 비

2023년 9월 5일
·
0개의 댓글
·
post-thumbnail

#4-3. React Component에서 부터 Hooks의 탄생까지(part3. hooks의 탄생)

🌸🌸 Hook (나? 리액트의 꽃인듯) 🌸🌸 Hook의 탄생비화 줄거리(summary 랄까? 암튼 그런거) class형 컴포넌트는 state와 Life Cycle의 관리가 가능하지만 컴포넌트 상태로직을 재활용하기 어렵고, this의 동작방식의 오류 가능성이 있으며 메모리 자원을 낭비한다는 단점이 있었다. 그리하여 state관리와 Life Cycle관리는 불가능하지만 메모리 자원의 낭비를 줄일 수 있다는 함수형컴포넌트를 사용하기에 이르렀다. cf. 메모리 자원 낭비? 모르겠는데? 그럴수있찌! 예를 들어서 class형 컴포넌트에서는 setState()함수를 통해 "모든" state를 업데이트 했단말얏! 그런데 useState()함수를 사용하면 변수 "각각"에 set함수가 존재하게 되는데 이거를 개별적으로 관리할 수 있게되는거얏!! > 함수형 컴포넌트에 state와 Life Cycle관리를 연동할 수 있게 하는 함수를 생각해 냈는데........이것

2023년 2월 8일
·
0개의 댓글
·
post-thumbnail

#4-2. React Component에서 부터 Hooks의 탄생까지(part2. component의 종류)

Component의 종류! >Component는 크게 class형 컴포넌트와 함수형 component로 나뉜다 ! 1. Class형 컴포넌트 클래스형 컴포넌트의 특징 class 그리고 component 상속이 필수임 render가 필수임 props를 조회할 때 this를 사용함 state(상태)를 사용함 life cycle과 method를 이용 클래스형 컴포넌트의 문제점 > #### 1. 컴포넌트 상태로직을 재활용하기 어려움 클래스 컴포넌트는 state를 저장할 수 있다는 편의성 덕분에 클래스 컴포넌트가 사용되어 왔으나, 이는 컴포넌트 간의 중복이 많다는 문제점 때문에 규모가 큰 컴포넌트가 만들어 진다. 즉, 유지보수와 테스팅에 불리하다. 👍 이를 보완하기 위해, HOC(Higher Order Component-컴포넌트 안에 컴포넌트 ...)를 사용함! 그랬더니, Wrapper Hell이 발생하여 코드추적이 어려워

2023년 2월 8일
·
0개의 댓글
·

[React] Container / Component

보통 React로 프로젝트를 진행할 때 create react-app ~ 로 폴더 및 파일들을 생성한 후 필요한 모듈을 터미널로 추가한다. OR 필요한 것만 하나씩 개별로 추가하거나 한 줄로 한꺼번에 추가해도 된다 :) 컨테이너는 컴포넌트를 감싸는 부모 느낌 컴포넌트는 자식 느낌 하나로 합쳐도 되지만, 둘로 나누어도 된다. 컴포넌트명은 필히 대문자로 기재해줘야 한다. 참 알쏭달쏭 신기한 코딩의 세계 ╰(°▽°)╯

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

[code.camp_2일차]React Component 및 state

React 요즘 웹개발의 트렌드는 필요한 기능을 컴포넌트에 만들어서 부품처럼 필요한 페이지에 가져다가 사용하는것이다. 대표적인 도구로는 Vue, React, Angular가 있다. 왜 React를 사용하는가 >1. 가장 높은 사용량 블로그 등이 활성화 잘 되어있음 커뮤니티 활성화 잘 되어있음 물어보기 쉽고, 검색이 잘됨 취업/이직도 잘됨 > All-In-One React.js는 웹 React-Native는 앱 React + Electron은 pc앱 > React만 알아도 나머지는 약간의 공부로 다룰 수 있기 때문에 많이 사용한다. Component란? >UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것 원본만 바꾸면 되기에 유지보수에 용이하고 한번 만들어놓은 컴포넌트는 같은 폼에서 다시 재사용이 가능하다. >### Component 작성 방법 2가지 클래스형 컴포넌트 함수형 컴포넌트 ![](https://velo

2022년 11월 15일
·
0개의 댓글
·
post-thumbnail

React hooks - useEffect

목차 > 컴포넌트의 LifeCycle (함수형 컴포넌트) useEffect useEffect -> mount (1) useEffect -> mount (2) useEffect -> update useEffect -> unmount 컴포넌트의 LifeCycle > React에서 컴포넌트의 LifeCycle은 크게 3가지로 구분 Mount - 브라우저에서 컴포넌트가 처음 렌더링 될 때 실행 update - 브라우저에서 컴포넌트가 재 렌더링 될 때 실행 Unmount - 컴포넌트가 브라우저에서 사라졌을 때 실행 useEffect useEffect? > Mount -> Unmount 중 특정 주기에 해당될 경우 실행되는 함수 useEf

2022년 9월 5일
·
0개의 댓글
·
post-thumbnail

React Component

컴포넌트란 UI 또는 기능을 부품화해서 재사용을 가능하게 하는 것이다. 우리가 게시판을 만든다고 가정했을 때, 게시물의 형태는 모두 동일하고 세부적인 내용만 달라지는 것을 확인할 수 있다. 그때 게시물의 형태를 매번 새로 만드는 것보다는 하나의 컴포넌트를 만들고 필요할 때마다 재사용 한다면 훨씬 효율적일 것이다. (내부 데이터와 이미지만 바꿔주면 된다.) 그럼 컴포넌트는 ctrl+c / ctrl+v 인가? 답은 아니다. 컴포넌트는 복사, 붙여넣기와는 다른 개념이다. 예를 들어 모든 UI를 노란색으로 변경하려고 한다면 복사, 붙여넣기의 경우 코드를 직접 하나하나 수정해야 하지만, 컴포넌트는 원본 하나를 만들어서 뿌려주는 개념이므로 원본만 변경하면 모두 동일하게 적용된다. 또한, 세부내용에 해당하는 각각의 데이터는 각 컴포넌트에 맞게 변경하여 사용이 가능하다. > 클래스형 컴포넌트 vs 함수형 컴포넌트 React에서 컴포넌트 작성 방법은 크게 두 가지가 있다. ![

2022년 5월 10일
·
0개의 댓글
·

[REACT] Presentational 컴포넌트와 Container 컴포넌트

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 리액트를 이용해 개발을 하고 계신 분들이라면 대부분 이미 알고 계실껍니다. 이번 글을 통해 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 개념에 대해 정리해보고자 합니다. 프레젠테이션 컴포넌트 직접적으로 보여지는 부분에 대해 담당한다. Store에 의존적이지 않다. props를 통해 데이터와 callback을 전달 받는다. 마크업과 스타일을 가진다. 데이터를 직접적으로 변경하지 않는다. UI 상태값 이외에 대체로 다른 상태값을 가지고 있지 않는다. 컨테이너 컴포넌트 데이터 핸들링에 대한 위주로 개발한다. 마크업이나 스타일을 가지지 않는다. 리덕스의 액션이나 상태 변경에 대한 로직을 담고 있고, 프레젠테이셔널 컴포넌트에 해당 상태를 전달하거나 함수를 제공한다. 다른 프레젠테이셔널 컴포넌트나 컨테이너 컴포넌트를 관리한다. 이렇게 각자의 용도가 명확하게 정리되어 분리하고, 대규모 프로젝트에서의

2022년 5월 9일
·
0개의 댓글
·
post-thumbnail

[리액트 블로그 만들기] props와 Input

🍎 코딩애플 리액트 기초 강의를 통해 블로그 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다. 📌 Props 부모 컴포넌트의 state 를 받아오고 싶다면? 부모 컴포넌트의 state 값을 자식 컴포넌트에 전달해주기 -> props 사용 1️⃣ props로 자식(Modal)에게 state 전달하기 Blog.js `` 💡 보통 props명은 state명과 동일하게 작성함 Modal.js 자식컴포넌트에서 Props 파리미터 입력 후 사용한다. (부모에게 전달받은 props를 모두 저장하는 일종의 변수) <img src='https://velog.velcdn.com

2022년 4월 5일
·
0개의 댓글
·
post-thumbnail

[리액트 블로그 만들기] useState와 onClick

🍎 코딩애플 리액트 기초 강의를 통해 블로그 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다. useState 데이터는 하드 코딩하지 않고 변수에 넣거나, state를 이용해서 저장해야 한다. 1️⃣ 변수 저장보다 state 를 쓰는 이유 웹이 app 처럼 부드럽게 동작하게 만들고 싶어서(값이 변경이 될 때 html이 자동으로 재렌더링(새로고침 x) 변수로 데이터를 저장하면 변수가 바뀌어도 자동 재렌더링이 되지 않고 새로고침해야한다. ➔ ⭐️ 자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 써야함 2️⃣ 쓰는 방법 Let [현재값, 변경함수] = useState(초기값) 변경함수를 통해 현재값을 바꿔야 재렌더링으로 제대로 변경됨 기존 state에서 값을 가져와 바꾸고 싶을 때는

2022년 3월 13일
·
0개의 댓글
·
post-thumbnail

[SeSAC DT 과정] REACT 세팅, 활용

React 1. React란? 👀 웹앱을 쉽게 만들 수 있도록 페이스북이 개발한 자바스크립트 라이브러리 > Web-app : 실제로 앱은 아니지만 모바일 앱과 같은 사용성을 지닌 웹 2. React의 장점 앱으로 발행이 쉬움 (react native) 앱처럼 뛰어난 ux 등장 이후 시장 점유율이 안정권으로 접어들었음 3. React 세팅 > 1. Nodejs 설치 명령어 사용 위함 15,16 버전 설치 권장! 최신 버전인 17은 에러 많음 > > 코드 에디터를 열고 새 폴더 만들기 > > 터미널에 npx create-react-app 플젝명 npx는 라이브러리 설치 도와주는 명령어 -> Nodejs 설치해야 이용 가능 > +) npm (라이브러리 설치 도와줌)이라는 툴 이용 가능 > > 4. 3번에서 만든 플젝명 폴더(자동 생성됨) 다시 오픈 > > > 5. 코딩 시

2022년 1월 25일
·
0개의 댓글
·
post-thumbnail

[CS] React Component Day-32

CDD (Component Driven Development) 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행 할 수 있습니다. Storybook CDD를 지원하는 도구 중 하나가 Component Explorer입니다. UI 개발도구가 다양하게 있고 그 중 하나가 Storybook 입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 전체 UI를 한눈에 보고 개발할 수 있습니다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있습니다. (버그를 사전에 방지할 수 있도록 도와줍니다.) 테스트 및 개발 속도를 향상시키는 장점이 있으며, 의존성을 걱정하지 않고 빌드할 수 있습니다. Storybook 설치 및 세팅법 CSS의 발전 인터넷의 발전으로 CSS

2021년 11월 29일
·
0개의 댓글
·
post-thumbnail

[TIL] JavaScript로 component 만들기 회고록

React 개발만 근 2달을 하다가 다시 Vanilla JavaScript로 코드를 짜려니 다시 머리가 백지가 된 기분이다.🤯 최근 여러번의 미션을 진행하면서 겪은 실수들을 문서화 하지 않았던 점을 뼈저리게 후회했기 때문에 지금부터는 사소한 시행착오도 기록을 해보려고 한다 ✍🏻 JavaScript로 React 컴포넌트의 흐름 만들기 리액트로 최근 몇 달을 개발했는데 JavaScript로 리액트의 흐름을 만들려니 또 백지가 된다... 내가 리액트의 Life-cycle에 대해 진득히 공부해 본 적이 있었던가...?🤦🏻‍♀️ 제로초님의 강의에 따르면 Class에서의 리액트 life cycle은 다음과 같이 진행된다. > - 기본 흐름: constructor ➡️ render ➡️ ref ➡️ `componentDidMou

2021년 7월 10일
·
2개의 댓글
·

효율적인 컴포넌트 작성법

실전 리액트 프로그래밍 인강을 보고 공부하면서 자주 볼 것 같아서 정리합니다. 컴포넌트 작성 순서 1. 속성값 타입 정보(propTypes) 컴포넌트를 사용하는 입장에서 컴포넌트를 직접 작성한 사람, 컴포넌트를 처음본 사람 등 컴포넌트를 사용하려면 속성값을 입력을 해야하는데 올바른 값을 입력하려면 타입을 올바르게 입력해야하기 떄문이다. 그리고 또한 3자가 아닌 자신이 직접 작성했더라도 이후에 봤을 때도 조금 더 알기 쉽기 때문 Typescript를 사용해도 마찬가지 2. 컴포넌트 함수 컴포넌트 함수를 작성할 때 이름을 정해주는 것이 좋은데 가장 큰 이유로는 디버깅 하기가 힘들다. 그리고 컴포넌트의 매개 변수는 명명된 매개변수 문법으로 작성해주는게 좋다. 3. 컴포넌트 함수 밖에 존재하는 변수와 함수 컴포넌트 밖에 있는 변수와 함수는 파일의 가장 밑에 정의하는 것이 좋다. 그리고 대문자로 작성해주는게 컴포넌트 안에서 다른 코드와

2021년 5월 26일
·
0개의 댓글
·

React 컴포넌트

React 컴포넌트 리엑트 컴포넌트 만드는 법 리엑트는 컴포넌트를 만들어서 웹 사이트를 잘 만드는게 우리의 목적이다. Hooks 이전과 이후 Hooks 이전에는 컴포넌트 내부에 상태가 있다면 class를 이용해서 만들고 라이프사이클을 사용해야 한다면 class를 오버라이징 해서 사용한다. 관계가 없다면 function을 사용한다. Hooks 이후에는 class 또는 function인데 지금은 hip한게 함수형 프로그래밍이다. 그래서 function을 쓰자. > class를 공부하지 말라는 것이 아니다. 회사에 가면 class로 이루어진 회사들이 많기 때문에 유지보수를 하기 위해서도 class를 알아야 하고 특히 라이프사이클을 이해를 해야한다. class로 컴포넌트 만들기 class 컴포넌트를 만들 때는 아래와 같이 만든다. class는 render메서드가 필수 이다. function 컴포넌트 만들기 function 컴포넌트를 만들 때는 아

2021년 3월 11일
·
0개의 댓글
·
post-thumbnail

[ React : component ]

Component : 재사용가능한 ul 단위를 일컫는다. 독립적으로 재사용한 코드로 관리할 수 있다. 하나의 component에 필요한 html, css, JS를 모두 합쳐서 만들 수 있다. 독립적이고 재사용 가능한 함수function과 비슷하다. React Component에서는 input을 props라고 말하고, return은 화면에 보여져야할 React 요소가 return 된다. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트) 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다. react는 Component를 만들고 관리하기 정말 좋은 라이브러리 이다. react에서는 component를 class나 function으로 만들 수 있다. Html 함수로 Welcome Component 구하기 class로 Welcome Component 구현하기 class로 Welcome

2020년 10월 11일
·
0개의 댓글
·