WoohyunKing의 개발 성장일지

useEffect Hook이란 ? const App = () => { const [name, setName] = useState(''); useEffect(() => { // (1) setName('우현'); return (() => { // (2) console.log('Cleanup'); } }, []); useEffect(() => { // (3) console.log(name); }, [name]); return ( {name} ); } useEffect 이란 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 생애주기를 대신 하기 위한 Hook이다. useEffect 는 Class Component의 componentDidMount, componentDidUpdate, 그리고 compo..

state란 ? import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( 버튼을 {count}번 눌렀습니다. setCount(count + 1)}>클릭 ); } State는 컴포넌트 내부에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다. state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있고, 변경될 때마다 컴포넌트가 다시 렌더링된다. state 변경은 사용자 작업 또는 시스템 생성..

1) LifeCycle 정의 React는 컴포넌트 단위로 UI를 화면에 보이게하고, UI를 바꾸고, 현재 UI를 화면에 없앤다. 각각의 컴포넌트들은 생성-> 업데이트 -> 제거 단계를 겪는 생명주기(LifeCycle)를 가지고 있다. 2) LifeCycle API React는 컴포넌트를 DOM 위에 생성하여 Rendering(화면에 보이기) 한다. 여기서 컴포넌트가 DOM 위에 생성 시간 상황에 따라 실행되는 메소드들이 LifeCycle API 컴포넌트가 DOM 위에 생성 할 때 나타나는 상황 : 컴포넌트가 DOM 위에 처음 생성될 때(Mounting), props나 state와 같은 데이터가 변경되어 업데이트 되었을 때(Update), 컴포넌트가 DOM에서 사라질 때(Unmonting) 컴포넌트 생성시..

클래스형 컴포넌트(Class Component) class App extends Component { render() { return 안녕! } } 기존의 React는 Class Component를 기반으로 작업했다. Class Component를 이용해 만들어낸 컴포넌트는 말그대로 하나의 객체처럼 동작할 것이다. this 를 통해 자기 자신을 칭하고, 뭔가 변화가 생기면 render() 메서드를 다시 호출해 리랜더링을 할 것이다. 그런데 객체를 사용할 때면 매번 언급되는 문제점이 있다. 객체를 이용한 프로그래밍 방식에서는 객체가 가지고 있는 상태와 메서드가 적절히 어우러지도록 설계한다. 이런 구조에서 메서드의 결과물은 상태의 영향을 받게 되는데, 상태에 따라 그 결과 값이 의도치 않게 변한다는 점이 문..

const MyComponent = React.memo(function MyComponent(props) { /* props를 사용하여 렌더링 */ }); 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다. React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링됩니다. 이 메서드는 오직 성능 최적화를 위..

프로퍼티(Props)란 ? 프로퍼티는 props(properties의 줄임말)로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용합니다.(단방향 데이터 흐름) 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호{ }를 사용합니다. 그리고 true와 false와 같은 Boolean 자료형의 경우, 중괄호로 감싸서 전달할 필요 없이 프로퍼티의 이름만 선언하면 됩니다. 이전에 Component 게시물에서도 언급했듯, props는 읽기 전용이기 때문에 하위 컴포넌트에서는 상위 컴포넌트의 프로퍼티를 수정할 수 없습니다. ⭐️⭐️⭐️ import React, { Component } from 'react'; import Header from './component/Head..

Component 란 ? 리액트로 만들어진 앱을 이루는 최소한의 단위로, 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수 또는 클래스 👉🏻 'props'라고 하는 인자를 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었습니다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있습니다. React에서는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문에 컴포넌트 이름은 항상 대문자로 시작해야 합니다 ⭐️⭐️ Components let you spli..

Element란 ? 리액트에서의 가장 작은 단위로, 화면에 표시할 내용을 기술합니다. 위와 같이 HTML 파일 어딘가에 가 있다고 가정해 봅시다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부릅니다. (React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다.) const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, world; root.render(element); React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼..

const element = Hello, world!; JSX란 ? JSX(JavaScript XML)란 Javascript에 XML을 추가한 확장한 문법으로, React Element를 생성합니다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링(여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 것)되는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환 됩니다. function App(){ return ( Hello react ); } 예를 들어 위의 코드는 아래와 같이 변환됩니다. function App(){ return React.createElement("div", null, "Hello", React.createElement("b"..

이 포스팅은 Javascript 라이브러리 중 하나인 React를 공부하기에 앞서 왜 리액트를 사용하는지, 어떠한 장점들을 가지고 있는지 정리해보려고 합니다. 대부분의 포스팅은 React 공식문서 및 자습서를 참고할 예정이고, 차차 공부해가면서 업데이트 해 나가겠습니다 :) React 란 ? React는 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용되며 웹, 모바일 앱 등의 view layer를 처리하는 데 사용된다. SPA란 ? 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하는 방식으로 구성된 단일 웹 페이지 애플리케이션..