React Foundation

먼저 전시간 복습으로 Single Page Application(SPA)에 대해 알고 넘어 가자 인터넷에 접속하기 위해서는 웹브라우저가 필요하다 웹브라우저를 통해 화면에 보여지는 문서가 웹페이지이고 웹사이트를 다양한 방식으로 그룹으로 묶이거나 연결된 웹페이지들의 모음이

Sass란? Sass 문법으로 스타일 속성을 부여하면 컴파일러를 통해 브라우저가 읽을 수 있는 css파일로 변환해주는 css 전처리기이다. 공식 문서 주소 : sass-lang.com SCSS : Sass에서 개선된 문법. 범용성과 CSS 호환성 장점이 있다 Sa

Hook은 클래스 컴포넌트에서만 사용할수 있었던 state 관리와 lifecyle 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수를 의미하며, 이러한 Hook 들의 모음을 Hooks라 한다React에서 컴포넌트를 생성하는 방법은 두가지

컴포넌트의 속성값을 의미하며, 더 정확하게는 부모 컴포넌트로 부터 전달받은 데이터를 지니고 있는 객체라는 의미이다]props를 이용하면 전달하고자 하는 어떤값이든(문자, 숫자, 변수, 함수) 모두 자식 컴포넌트에 전달할 수 있다props 사용할 때 우리가 집중해야하는

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로, 즉 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값이다컴포넌트 내에서 정의하고 사용하며 얼마든지 변경할 수 있다버튼을 클릭하면 h1 태그의 배경색이 바뀌는 동작 구현먼저 state를 사용하기

한마디로 부작용이다 어감상 부정적인 뉘앙스로 단어를 사용하곤 하지만 부작용은 부수효과라고도 표현이 가능하다 (부수효과 : 주요한 효과에 따라서 발생하는 부수적인 효과)프로그램에서 부작용이란? 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과특히 "함수" 에서 자주

함수의 return문 위에서 바로 하고 싶은 동작(Side Effect)를 실행시킨다1\. 문제점Side Effect가 렌더링을 blocking코드는 위에서 아래방향으로 순차적으로 발생한다 그래서 시간이 오래걸리는 Side Effect를 실행하면 JSX를 리턴하는 코드

useState의 대체 함수이다\*reduce: 이전 상태를 새로운 상태로 변경할 때 사용되는 함수(state, action) => newState의 형태로 reduecer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환한다 다수의 하윗값을 포함하는

백엔드 API인 것 처럼 흉내내는 데이터이다백엔드 API가 완성되지 않은 상황에서 API가 완성될 상황에 대비해 의도한대로 UI를 그릴때 도움을 준다\*Mock : 흉내내다백엔드 API가 미완성인 상태에서도 작업에 차질없이 개발할 수 있다백엔드 API의 구성을 미리 맞

If Else Statement : 특정 변수나 값을 활용해 조건에 넣어서 활용 Ternary Operator : 삼항연산자를 활용해 JSX안에서 활용&& Operator(logical operator) : isAdult조건이 참일때만 뒤의 컴포넌트 반환조건이 거짓이라

캐싱(임시로 저장하는것)된 결과값을 저장해서 같은 input이 들어왔을때 이미 저장된 결과값을 활용하여 프로그램을 가속화 할 수 있는 최적화 방법이다Cache : 임시적으로 결과를 저장하는 공간 (한번 수행한 결과를 저장하는 공간)리턴문 안에서 같은 함수를 호출하는 방

render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다자식 컴포넌트를 부모 컴포넌트에서 접근해야할때 주로 활용되는 요소이다포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때애니메이션을 직접적으로 실행시킬 때서드 파티 DOM 라

공식문서 기준UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우프로젝트의 기준점에 따라View와 로직 분리state에 따라 분리로그인 컴포넌트의 구성요소 : 로고, 타이틀, 입력창(이메일, 비밀번호), 회원가입 링크, 구분선, 소셜로그인 버튼회원가입 컴포

정적 라우팅은 라우팅을 설정하는 가장 기본적인 방법이다즉 Router.js 컴포넌트에서 미리 프로젝트에 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트들을 모두 정의해두는 방식이다. 이 방식은 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는

react에서 stlyed-coponents를 설치 후 기본 사용법은 변수 이름을 지어주고, styled.태그명에 백틱부호를 사용해 백틱부호안에 적용할 스타일을 넣어주면 된다.stlye이 작성된 영역과 컴포넌트가 구현된 영역이 나뉘어 있어 보기에 간결하다위의 예시에서

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 한다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하

react-router-dom 버전5에서 버전6로 업데이트 되면서 달라진 점을 알아보자.본래 Switch를 사용하여 Route로 컴포넌트를 각각 감싸주었다면 버전6에서는 Routes로 Route를 모두 감싸준다.훨씬 간결해진 것을 볼 수 있다.createBrowserR

간단한 회원가입 폼을 만들기 위해서 우리는 useState로 하나하나 state를 선언해주어야 하고state 를 다루기 위해서 핸들링 함수를 만들어야 하고에러를 위한 state를 선언해주어야 하고검증을 위한 함수를 만들어야 한다코드의 길이도 길지만, React 에서 컴