printf("Hello dev_TORY!");

이번 포스팅에서는 리액트에서의 상태 관리에 대해 공부해 보려고 한다. 앞서, React - State & Props 포스팅에서 State와 Props에 대해 공부했었다. 상태 관리 공부를 하기 전에, State와 Props에 간단히 정리해보자. State는, 특정 컴포넌트 내부 안에서 선언되고 특정 컴포넌트가 갖는 상태(값)을 변경하기 위해 사용한다. Props는, 부모 컴포넌트에서 자식 컴포넌트로 데이터(상태)를 전달하기 위해 사용한다. (데이터 변경 불가 only 전달용) 왜 상태 관리 공부를 하기 전에 State & Props에 대해 먼저 짚어본 것일까? 상태 관리란, State & Props 사용시 발생되는 단점을 보완하기 위해 사용하는 것이기 때문이다. 리액트는, 페이지를 수많은 컴포넌트들로 쪼..

이번 포스팅에서는 리액트에서의 라우팅에 대해 공부해 보려고 한다. 리액트를 사용하면 하나의 페이지 안에 있는 요소를 여러 컴포넌트로 쪼개어 렌더링할 수 있다. 따라서 다양한 컴포넌트를 하나의 페이지에서 활용한다면, 하나의 웹페이지로도 웹사이트를 개발할 수 있을 것이다. SPA(Single Page Application) 단일 웹페이지로 동작하는 애플리케이션 브라우저에서 자바스크립트를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성 및 조작 검색 엔진 최적화(SEO)에 적합하지는 X React, Svelte, Vue.js와 같은 라이브러리로 개발 가능 리액트에서 라우팅은 어떻게 이루어질까? 먼저, 라우팅이란 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 뜻한다. 리액트에..

이번 포스팅에서는 react에서의 hooks에 대해 공부해 보려고 한다. Hooks React의 새로운 기능 클래스 컴포넌트에서만 가능했던 state(상태관리)와 lifecycle(라이프사이클)이 함수형 컴포넌트에서도 사용 가능하도록 돕는 기능 사용 규칙 최상위 단계에서만 호출 가능(최상위 컴포넌트X) 반복문, 조건문, 중첩된 함수 내부에서 호출X Hook은 React 함수형 컴포넌트 안에서만 호출 가능 커스텀 훅 이름은 "use"로 시작하는 것을 권장함 자주 사용되는 Hooks에 대해 간단히 정리한 표는 다음과 같다. Hooks 종류 설명 useState() 상태 관리를 위한 가장 기본적인 훅 useRef() ref를 생성하고 관리할 수 있는 훅(DOM 접근, 변수 보존 등) useEffect() 컴포..

이번 포스팅에서는 Ref와 Life Cycle에 대해 공부해볼 것이다. html에서 특정 요소에 접근하기 위해서는 어떻게 할까? html에서는 원하는 요소에 고유한 값을 갖는 id 속성을 할당하여 해당 id 값을 갖는 특정 요소에 직접 접근한다. 반면, react에서는 ref를 사용하여 특정 요소에 접근한다. ref에 대해 자세히 공부하기 전에, 왜 react에서도 html과 같이 id를 활용하여 특정 요소에 접근하는 방식을 사용하지 않는지에 대해 먼저 알아보자. react에서도 id를 사용할 수 있다. JSX 안에서 DOM에 id를 할당하면 해당 DOM을 렌더링할 때 그대로 적용이 된다. 하지만, 특수한 경우가 아니라면 권장하지 않는 방법이다. 왜일까? react는 UI 전체를 컴포넌트로 쪼갠다는 특징..

이번 포스팅에서는 React에서의 Event에 대해 공부해보려고 한다. React에서 이벤트를 처리할 때 몇 가지 주의할 점들이 있다. 1.React에서의 이벤트 이름은 소문자가 아닌 camelCase를 사용한다. 예로, 클릭시 발생하는 이벤트를 떠올려보자. html에서는 해당 이벤트를 걸 요소에 onclick = "~" 을 사용했지만, React에서는 onClick = {~} 으로 사용한다. 2. 이벤트 핸들러는 문자열이 아닌 JSX를 사용하여 전달한다. html에서는 문자열로 감싸서 함수를 실행시켰지만, React에서는 JSX를 사용하여 함수 자체를 전달한다. onClick = {함수명} 3. React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시..

이번 포스팅에서는 리액트의 State와 Props에 대해 공부해보려고 한다. props 부모 컴포넌트(상위) → 자식 컴포넌트(하위) 방향으로 보내는 데이터 (단방향 데이터 흐름) 여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용 컴포넌트 속성을 설정할 때 사용하는 요소 컴포넌트끼리 데이터를 전달하는 수단 부모 컴포넌트에서 props가 전달되지 않았을 때 기본 값으로 특정 값 설정 가능 → defaultProps 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열 가져오기 가능 → props.children 함수형 컴포넌트에서는 props.name으로 접근/ 클래스형 컴포넌트에서는 this.props.name으로 접근 export function Function..

이번 포스팅에서는 React Component와 JSX 문법 규칙에 대해 공부해볼 것이다. 앞서 지난 포스팅에서, React의 특징으로 Component를 언급했었다. React는 전체 화면을 구성하기 위해 화면의 일부 일부를 Component로 만들고 조립하여 UI 화면 전체를 구성한다. React의 Component에 대해 더 알아보자. Component React의 핵심 React에서 화면을 구성하는 하나의 부분 내부의 데이터만 변경해서 전체적인 UI를 재사용 가능 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 분리 가능 React Component의 종류 클래스형 컴포넌트 render 함수를 반드시 사용해야 함 lifecycle 가능 컴포넌트를 만들 때 기존 C..

이번 포스팅부터는 프론트엔드 라이브러리 점유율 1위를 차지하는 React에 대해 다루어 볼 것이다. 오늘은, React가 무엇인지에 대해서만 간단히 알아보도록 하자. React JS 동적 사용자 인터페이스를 만들기 위해 페이스북에서 만든 오픈 소스 Javascript 라이브러리 싱글 페이지 어플리케이션에서 사용자 인터페이스를 만들기 위해 사용하는 Javascript 라이브러리 쉽게 말해 Javascript의 수많은 문법을 더욱 편하고 효율적이게 사용할 수 있도록 도와주는 라이브러리 실사용 점유율이 가장 높은 라이브러리 React는 단방향 데이터 흐름을 가짐 → 데이터 흐름의 변화 예측 가능 양방향 데이터에 비해 코드의 양이 복잡해질 수 있지만, VDOM으로 보완 Component 기반 구조 React는 ..

이번 포스팅에서는 자바스크립트에서의 클래스에 대해 공부해 보려고 한다. 클래스(Class) class 클래스명{constructor(){}} ES6부터 등장한 객체(object)를 만드는 방법 객체(object)를 만들 수 있는 틀(template) 정해진 틀로 같은 규격의 객체를 여러 개 만들 수 있음 → 재사용 유리 new 키워드를 이용해 미리 만들어둔 클래스 형태의 객체를 만들 수 있음(instance화) extends 키워드를 이용해 상속을 받을 수 있음 상속시, 기존에 있던 클래스의 속성과 메소드를 받아와서 사용 가능 상속시, 기존에 있던 클래스의 메소드를 가공하여 사용 가능 오버로딩(Overloading): 상속받은 함수와 같은 함수명을 사용 but, 매개변수의 개수 or 타입을 다르게- 오버..

이번 포스팅에서는 자바스크립트에서의 구조 분해 할당에 대해 다뤄보고자 한다. 구조 분해 할당(Destructuring assignment) 배열 or 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식 배열과 객체를 편하게 사용하기 위함 배열 or 객체에 저장된 데이터의 일부를 가지고 오고 싶을 때 주로 사용 배열 구조 분해, 객체 구조 분해 배열 구조 분해 const[변수명] = 배열; [ ]에 들어간 각 변수에 배열의 인덱스 순으로 대응 구조 분해시 변수의 값이 undefined일 때, 기본값 할당 가능 구조 분해 없이 두 변수의 값 교환 가능(임시변수 temp를 선언하여 값을 임시로 저장하고 교환하여야 함) /* 1. 배열의 구조 분해 할당 */ const arr2 = ['..