Multi Developer SuHo

안녕하세요~ 이번에 알아볼 내용은 리액트에서 디자인 패턴중 아토믹 패턴에 대해 학습해보겠습니다. 디자인 패턴이 무엇인지, 그리고 이것을 왜 사용해야하는지 알아보도록 하겠습니다. 📑목차1. 아토믹 디자인 1-1. 아토믹 디자인 이란?1-2. 아토믹 디자인 특징1-3. 아토믹 디자인 5단계 구성1-4. 아토믹 디자인 적용한 코드서론먼저 디자인 패턴중 "아토믹 디자인" 에 대해 들어보셨거나 사용하신적이 있으실까요? 저도 아토믹 디자인을 경험한적이 없어 이렇게 포스팅을 해봅니다. 저번 Node.js 에서는 MVC 디자인 패턴을 사용하여 프로젝트를 제작해보았는데요, 리액트에서는 아토믹 디자인이라는 패턴을 사용해보도록 하겠습니다. 그럼 본문으로 들어가시죠~본론1. 아토믹 디자인 (Atomic Design) ..

안녕하세요~ 이번에는 리액트 훅 종류중 useEffect에 대해 알아보겠습니다. 📑목차1. useEffect1-1. useEffect란?1-2. useEffect 사용 방식1-3. useEffect 의존성 배열1-4. useEffect 사용 코드 서론먼저 useEffect 훅을 사용하기전 생명주기에 대한 이해가 있으셔야 합니다. 왜냐하면 useEffect는 생명주기를 대체하기 때문입니다. 이전에 클래스형 컴포넌트에서 생명주기 함수를 보시면 componentDidMount( ), componentDidUpdate( ), componentWillUnmount( ) 이 함수들을 사용하셨을 겁니다. 생성, 업데이트, 소멸 이런 순서로 말이죠, 함수형에서 생명주기는 useEffect로 처리할 수 있기 ..

안녕하세요~ 이번에는 리액트에서 State와 props에 대해 알아보고 각각 무엇을 뜻하고, 어떻게 사용되는지 한번 이번 내용을 통해 알아보도록 하겠습니다.📑목차1. state1-1. state란?1-2. state 특징1-3. 클래스형 컴포넌트 state1-4. 함수형 컴포넌트 state 2. props2-1. props란?2-2. props 특징2-3. 클래스형 컴포넌트 props2-4. 함수형 컴포넌트 props서론리액트에서 state와 props를 학습하기전, node에서 혹시 res.json({state: 200, message : "응답 성공!"}) 이런 형식에 대한 응답 요청을 보신적이 있으신가요? node 에서 "state" 는 상태 코드를 나타냈습니다. 리액트에서도 state는 "상태"..

안녕하세요~ state, props 다음 이제 훅의 탄생으로 컴포넌트의 개발 생산성이 높아지게 되면서 useState등 훅의 필요도가 높아졌습니다. 이번에 알아볼 내용도 훅의 종류중 하나인 useState로 상태관리하는데 사용되는 훅입니다. useState를 어떻게 사용하고 상태를 관리하는지 한번 보시죠~📑목차1. useState1-1. useState란?1-2. useState 사용법1-3. useState 예제 코드서론React를 사용해보신 분이라면, 본문으로 들어가기 전에 이런 경험이 있을 겁니다. Hook이 등장하기 전에는 컴포넌트에서 상태 관리를 할 때 this.state를 사용해야 했습니다. 또한 상태를 변경하려면 항상 this.setState를 사용해야 했고, this를 제대로 바인딩하지 ..

안녕하세요~ 이번에는 리액트 함수형 컴포넌트와 훅에 대해 알아보도록 하겠습니다.📑목차1. 함수형 컴포넌트1-1. 함수형 컴포넌트의 등장 배경1-2. 함수형 컴포넌트 문법2. Hook(훅)2-1. Hook(훅)이란?2-2. Hook(훅)의 등장 배경2-3. Hook(훅)의 종류서론먼저 함수형 컴포넌트를 배우기 전에 클래스형 컴포넌트 구조를 한번 보셨을까요? 클래스형 컴포넌트에는 생성자 함수를 호출하고, this 키워드를 사용하여 컴포넌트 구조를 구현했어야 했습니다. 클래스 문법에 대한 개념이 잡혀있지 않으면 개발자로선 구현하기가 어려웠죠, 그래서 이번에 알아볼 내용은 함수형 컴포넌트와 Hook에 대해 알아보도록 하겠습니다. 본론1. 함수형 컴포넌트 1-1. 함수형 컴포넌트의 등장 배경 초기에는 함수형 ..

안녕하세요~ 저번에는 리액트에 대한 개념을 알아보았습니다. 이번에는 리액트에서 중요한 생명주기에 대해 알아보겠습니다. 📑목차1. 생명주기1-1. 리액트 생명주기란?1-2. 컴포넌트의 생명주기 3단계1-3. Mounting(마운팅)1-4. Updating(업데이트)1-5. Unmounting(언마운팅)1-6. 클래스형 컴포넌트 생명주기 코드서론 리액트를 처음 접했을 때 가장 헷갈렸던 부분 중 하나가 바로 생명주기(Life Cycle)였습니다. 컴포넌트가 언제 생성되고, 업데이트되고, 사라지는지 그 흐름을 이해하는 건 상태 관리와 성능 최적화에도 큰 도움이 됩니다. 이번 글에서는 리액트의 생명주기를 클래스형 컴포넌트를 통해 설명해보도록 하겠습니다. 본론1. 생명주기(Life Cycle) 1-1. 리액..

안녕하세요 프로젝트 초기 세팅에 필요한 Babel(바벨)과 Webpack(웹팩)에 대해 알아보고, Babel을 사용한 코드와 Webpack을 사용한 코드를 보면서 설명하겠습니다.📑목차1. Babel(바벨)1-1. Babel의 필요성1-2. Babel의 목적1-3. ES6의 등장1-4. 공백기2. Webpack(웹팩)2-1. Webpack이란?2-2. Webpack의 동작2-3. Webpack의 목적2-4. 모듈과 번들러서론이번에 알아볼 내용은 "바벨" 과 "웹팩" 입니다. "바벨"은 자바스크립트 ES5, ES6문법을 공부하면서 한 번쯤은 들어보셨을 겁니다. 그럼 "웹팩" 은 들어보셨을까요? 저도 리액트에 대한 개념이 잡혀있지 않기 때문에 "웹팩" 역시 처음들어봅니다. 이 두가지의 대한 개념과 동작 ..

안녕하세요~ Node.js가 끝나고, 이제는 리액트에 진입했습니다. 최근들어 포스팅이 없던 이유는 팀프로젝트 기간으로 2주동안 프로젝트에만 포커싱을 잡았기 때문입니다. 조만간 결과물에 대한 내용을 포스팅 해드릴테니 기다려주시면 감사하겠습니다!! 📑목차1. 리액트(React)1-1. 리액트란?1-2. 리액트의 탄생배경1-3. 리액트의 목적1-4. 리액트의 데이터 흐름 1-5. 리액트의 장단점1-6. 가상돔(Virtual DOM)📜서론리액트에 대해 혹시 접해보신적 있을까요? 웹 개발 분야에서는 현재 정점을 찍고 있고, 많이 쓰이고 있는 기술스택입니다. 그럼 리액트가 무엇인지, 어떻게 탄생했는지 알아봐야겠습니다. 그럼 본론으로 넘어가시죠~📜본론1. 리액트(React)1-1. 리액트(React)란?사용자 ..