React

App.js Gugudan.js Button.js

리액트는 2013년, 페이스북에서 개발한 자바스크립트 라이러리로, 우리가 사용하는 웹의 UI를 손쉽게 만들어 준다.요즘 가장 유명하고 사용자가 많은 React, 거의 요즘 웹개발자 엔드스펙이라고 봐도 된다.그렇다면 React는 어떤 장점이 있길래, 사람들이 좋아하는

App.js 파일을 열어보자위에 App.js 파일에서는 HTML 태크를 반환하는 App이라는 함수를 선언하고 있다.HTML을 반환한다고? ㅇㅇ이렇게 HTML 형식의 값을 반환해 주거나 변수에 HTML을 대입할 수 있는 문법을 JavaScript eXtension 바로

Component 컴포넌트 생성 src 폴더에 임의의 js 파일을 생성하고, 아래와 같은 코드를 작성해 본다. return() 안에 두개의 html태그 나란히 적으면 안되고 하나의 태그로 시작해서 하나의 태그로 끝나야 한다.

그렇다. 리액트에 CSS 적용은 앞 글에서 JSX를 설명하면서 언급을 하였는데 그게 끝이 아니다. 만만치 않은 놈이다.다시 코드를 가져와 보자.헬로 월드가 아니고 헬 월드 같다. 여기까지가 앞 글에서 설명했던 컴포넌트에 스타일을 적용하는 방법이다. 하지만 문제가 있으니

앞에 포스팅했던 react 내용들을 보며, 쉽다고 생각했지만 이제 시작이다.아직 리액트 기본적인 기능도 사용하지 않은 것이다. 벌써 머리가 아프지만 하나씩 천천히 알아가보자이러한 기능들은 Hook이라는 이름으로 제공되고 대표적으로 상태관리를 위한 useState,use

리액트에서 데이는 위에 아래로, 즉 부모 컴포넌트에서 자식 컴포넌트로 진행되는 단방향의 흐름을 가진다. 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야한다는 것이다. 뭐라는건지 빨리 알아보자먼저 Content

저번 포스팅에서는 기본적인 props에 대한 개념과 사용법에 대해서 공부해보았다이번에는 업그레이드된 props 사용 방법을 알아보자...말이 참 어렵다. 풀어서 설명하자면, 객체의 구조를 해체하고 변수에 대입한다는 것이라고 한다.대충 이해가 되는가? 바로 적용해보자무엇

SPA에서 화면을 전환하는 Routing , 그리고 스타일링을 편하게 할 수 있게 해주는 CSS 전처리기(Preprocessor)에 대해서 알아보자. 해당 기능들을 제공하는 라이브러리를 직접 프로젝트에 설치하고 사용해보자 1. SPA SPA (Single Page A

key를 알아보기 전에 map함수 사용법에 대해서 간단히 알고 가보자위와 같이 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라

classnames는 이번 Asssignment를 하면서 유용하게 잘 사용하였기에 정리를 해보자 한다.classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리이다. 또한, CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적

이름에서 알 수 있듯이 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.실제 API에서 받아온 데이터가 아닌 필요에 의해 샘플로 만들어 본 데이터이다.사용이유는 간단하다.개발 진행 시 필요한 API가 완성이 안되어있을 경우 mock data를 만들어 데이터가 들어오는

useEffect는 엄청 중요한 Hook이라고 한다. 리액트 컴포넌트가 렌더링(Mount, Update, Unmount)될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.useEffect 훅은 인자로 콜백함수를 받으며, 두 가지 형태를 기억하자1\. 첫번째

Memoization 기본적인 useMemo와 useCallback에 대한 사용법을 알기 전에 Memoization부터 보는 것이 좋겠다. Memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래민 기법을

일반적인 React 애플리케이션에서 데이터는 위에서 아래로, props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도

구현 방식 대신 무엇인지를 나타내는 변수명(How vs What)을 선택하여 개발자의 의도를 드러내야 한다.함수를 새로 만들고 목적을 잘 드러내는 이름을 붙여야한다.('어떻게'가 아닌 '무엇을' 하는지가 드러나야 한다.)변수명이 중요한가?에 대해서는 공부를 하다보면 많

원티드 프리온보딩 챌린지의 사전과제는 로그인 + TODO 앱을 만드는 것이었다. 솔직히 어려운 과제도 아니고 취업 준비가 우선이라고 생각이 들었고 강의를 들으면서 고쳐나가자는 마음으로 기능만 대충 구현하고 다른 공부를 했다. 하지만 1차 강의?를 듣고 많은 생각이 들었