mbti를 만들면서의 트러블슈팅 및 정리 App.tsx 기존 route에서 해당하는 유형의 타입을 뽑아 url에 넣는 형식으로 해야 깔끔할꺼라 생각하여, path 설정을 바꿔보았다. Quiz.tsx 코드의 해당 로직에 필요한 result쪽의 데이터를 Quiz Component에서 불러오는 형식으로 진행해야 얼추 맞을꺼란 생각이 들었다. 기존의 로직에서는 코드를 배열에 저장하여, 최종결과를 계산하기 위해 논리적인 결과를 하지 않고, Result Component에서 해당 부분을 전부 해, 맞는 유형을 찾는 짓거리를 했었다. (결과만 빨리 보기 위해서.) Result Page에선 이전 코드를 기반으로 조건부로 렌더링 된 함수내에서 호출하는 되었다. 이 조건부 함수 호출 조합은 함수가 필요할 때 항상 호출되도록 보장하지 못할수있었다. 코드를 전부 뜯어내고 나서야, 변경 사항을 수신해주는 Hooks를 사용하여 모든 질문에 답변했는지에 대해 확인하고, 상태를 true로 설정한 다음 3초 지…

JEST 페이스북 팀에서 Jasmine 기반으로 만든 테스팅 프레임 워크이다. C-R-A로 만든 리액트 프로젝트에는 자동으로 적용이 되어있다. react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행하며, 컴포넌트의 props나 state를 조회하는 일은 없다. (컴포넌트를 리팩토링 하게 될 때에는 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않는다. 이점을 중요시 여겨 컴포넌트의 기능이 똑같이 작동한다면 컴포넌트의 내부 구현 방식이 많이 바뀌어도 테스트가 실패하지 않도록 설계) 즉, react-testing-library는 구현 (Enzyme)에 중점을 둔 테스트보다는 사용자 행동 (react-testing-library)에 중점을 둔다. 2019.09.04일 기준 라이브러리가 바뀌었다. 아래의 명령어로 설치. 의 내용을 아래의 코드로 변경 해당 에 의구심이 있었는데, 보니까 벨로퍼트의 글에 잘 나와있더라. …

useState를 이용하여 컴포넌트 상태값 관리하기. 컴포넌트를 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때에 어떻게 구현할 수 있는지에 대하여 알아보자. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할수있게 되었다. 라는 함수를 호출하여, 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 만들어볼것이다. Counter.jsx App컴포넌트에서 Counter.jsx를 렌더링을 해보자. img 이런 UI가 보여지면 성공적이다. 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 함수이다. 함수는 파라미터로 전달받은 값을 최신 상태로 설정해준다. h1태그에는 이제 0이 아닌 값을 보여줘야 한다. 코드를 다 수정 후, 버튼을 눌러보면 새로운 파라미터값을 받아오는…

Redux Redux로 상태 관리를 하는 이유와 이로 인해 얻어지는 이점은 다음 같다. 상태 관리는 사실 리액트의 관심사가 아니다. App은 상태가 어떻게 처리되는지 모르게 한다. App은 View가 어떻게 그려지는지만 관심을 갖게 한다. App은 상태 관리(store)와 View를 연결만 해준다. App은 상태 관리 로직이 어떻게 구현됐는지는 모른다. 상태 관리 로직 변경의 영향이 View로 전파되지 않는다. Redux 설치 Redux의 3가지 원칙 3가지의 원칙 - 리덕스 공식 문서에서는 리덕스를 사용할 때 따라야 할 3가지 원칙을 제시한다. 전체 상태값을 하나의 객체에 저장한다. 상태값은 불변 객체이다. 상태값은 순수 함수에 의해서만 변경되어야 한다 Action Action 상태값은 오직 액션 객체에 의해서만 변경되어야 한다. type: (string) payload(object): {taskTitle} 액션 객체에는 type,payload 속성으로 구성되는데 type은 어떤…

MVC 아키텍쳐의 한계 Flux 아키텍쳐에 대해 알아보기 전에 MVC 아키텍쳐에 대해 간단한 얘기를 해보자. Flux 아키텍쳐는 Facebook에서 개발한 단방향 데이터 흐름을 가지는 아키텍쳐 이다. MVC 아케텍쳐의 구조를 보면 이와 같은 구조를 가지는데 Controller는 Model의 데이터를 조회 하거나 업데이트하는 역할을 하고 Model은 이런 데이터를 View 통해 반영시키기도 하고. 또, View는 사용자로부터 데이터를 입력받기도 하기 때문에 사용자의 입력이 Model에 영향을 주기도 한다. 문제는 이러한 구조가 거대한 어플리케이션을 대상으로 한 프로젝트에 대해서는 너무 복잡하고 빨라진다는 것이다. 위 사진은 Facebook에서 얘기한 구조의 복잡성이다. 문제점 MVC의 근본적인 문제에 대해 설명하자면 사용자와의 상호작용이 View에서 일어났기 때문에 사용자의 입력에 따라 Model을 업데이트 해줘야 하는 경우가 있고 여기서 의존성의 이유로 하나의 모델만이 아닌 다…

Testing 이란 무엇인가 를 말한다. 제품이 예상하는 대로 동작 하는지 확인하는것. 테스트 피라미드 E2E Test = UI 테스트,사용자 테스트 Integration Test = 통합 테스트(모듈들,클래스들) Unit Test = 단위 테스트(함수,모듈,클래스) TDD TDD(Test-driven development ( 테스트 주도 개발 ) 개발(코드 작성)전 테스트 코드를 먼저 작성 TDD를 작성해야 하는 이유 구현 < 인터페이스 => 코드의 퀄리티 향상 사용자 입장에서 코드를 작성 모든 요구 사항(목표)에 대해 점검 시스템 전반적인 설계 향상 개발 집중력 향상 Jest 알아보기 JEST 공식문서 자바스크립트 환경에서 테스팅을 할수있는 프레임워크이다. 테스팅 라이브러리중에서 가장 간편하고 심플한 라이브러리라고 할수있음. 바벨을 이용하거나 타입스크립트,앵귤러,뷰 UI프레임워크에서도 사용이 가능. JEST 필요한 용어 expect : expect 기능은 값을 테스트할때 주로…

파이어베이스 사용기 파이어베이스 로그인 후 프로젝트를 하나 생성한다. 애널리틱스 사용하지 않으면 체크 안해도 됨. 밑에있는 모양 클릭한다. 파이어베이스 호스팅을 하지않아 체크를 안하고 넘어간다. 이 구문들을 복사해놓자 로 넘어가 추가할 부분들을 추가하자. 로그인 제공업체 추가시 코드로 넘어간다. 리액트 코드 작성 npm 사용시 yarn 사용시 src folder에 들어가 파일을 만든 후 전에 복사해놓은 내용들을 넣는다. 그 후엔 자신이 어떻게 사용할지 구현하며 로그인에 작성할 코드를 만들면 된다. 파이어베이스 사용기 이 구문들을 복사해놓자 로 넘어가 추가할 부분들을 추가하자. 로그인 제공업체 추가시 코드로 넘어간다. 리액트 코드 작성 npm 사용시 yarn 사용시 src folder에 들어가 파일을 만든 후 전에 복사해놓은 내용들을 넣는다.

함수형 컴포넌트의 차이점 함수형 컴포넌트의 차이점

조건부 렌더링 (Conditional Rendering) => 조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 isLoggedin이라는 Props를 설정해 보겠다. => 여기서 true는 JavaScript 값이기에 중괄호로 감싸준다. 간단하게 Props를 destructuring 하여 name을 사용한다면 아래와 같이 사용이 가능하다. 삼항연산자를 사용해보자. 로그인이 되었을때 즉 {isLoggedIn=true}일 경우, “로그인 완료” 라는 문구를 추가적으로 보여주고, false일 경우엔 null이 되어 아무런 문구도 추가적으로 띄우지 않게 해보자. 현재는 {isLoggedIn = true} 이기 때문에 문구가 추가된것을 확인할 수 있다. 하지만 위와같이 내용이 달라지는게 아니라 보여주거나,안보여거나 하는 상황에서는 연산자를 사용하는것이 더 간편하다. 추가적으로 name에 대해 조건…

배열의 복제 배열을 복제하려 할때 기준 ES5 문법에서는 아래와 같이 반복문을 통해 일일이 값을 넣어줘야 한다. 위의 코드랑 로직을 ES6의 Spread Operator를 통해 간편하게 배열을 복제 할 수 있다. ※ 이 배열 복제는 Reference 복사가 아니라, 값 복사로 newArray에서 변경을 해도 기존 array는 변경이 없다. 배열 병합 객체에서도 동일 특정값만 변경하기 위에 코드는 React에서 state 관리할때 불변성을 유지하며, 객체중 일부만 Update를 해야할때 쓰인다.

Props 와 State 란? Props와 State를 요약해서 설명하자면, 는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터이고 해당 데이터는 직접적으로 수정할 수 없는 값. 는 컴포넌트 내부에서 가지고 있는 값으로써 변경할 수 있는 값. 아래 그림은 props와 state를 잘 보여주는 그림이다. props 와 state 로 간단한 예시를 해보자. Todo.js Title.js Todo 컴포넌트와 Title 컴포넌트는 서로 부모 자식 관계이다. todo가 부모이고, title이 자식 관계 이다. ⛱️ Props Title이라는 컴포넌트는 Todo 컴포넌트로부터 title 이라는 props를 받는다. 이는 부모 컴포넌트로부터 일방향적으로 전달받은 것이고, Title Component 에서 수정할 수 없다. ⛱️ State props 와 동일하게 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이지만 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리하며, 값의 변경이 가능하다.…

리액트는 MVC 패턴 중 View에 해당하는 라이브러리다. 그러다 보니 각각의 컴포넌트는 컴포넌트의 수명주기, 라이프 사이클이 존재한다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이난다. 아래의 이미지는 리액트 라이프 사이클을 나타낸다. 라이프 사이클의 유형 라이프 사이클은 크게 3가지 유형으로 나눌 수 있는데 생성이 될 때, 업데이트할 때, 제거할 때이다. 리액트에서는 이러한 작업을 Mount, Update, Unmount 라고 한다. Mount는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. Update는 다음과 같은 4가지 상황에서 발생한다. prop가 바뀔 때 state가 바귈 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 할 때 Unmmount는 DOM에서 제거되는 것을 뜻한다. React Lify Cycle constructor 컴포넌트가 처음 만들어질 …