저장소

원문 : https://www.freecodecamp.org/news/test-driven-development-tutorial-how-to-test-javascript-and-reactjs-app/ Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications Understanding test-driven development is an essential part of being a prolific software developer. Testing provides a solid platform for building reliable programs. This tutorial will show you all y..

4. JSX의 기본 규칙 알아보기 JSX 는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 입니다. return 안녕하세요; 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환을 해줍니다. 어떻게 변환되는지 한번 예시를 볼까요? https://bit.ly/2wMpkk2 Babel 은 자바스크립트의 문법을 확장해주는 도구입니다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다. JSX 가 JavaScript 로 제대로 변환이 되려면 지..

1. Props Drilling Props Drilling React에서 props로 컴포넌트간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 할 때가 있다. 위 그림에서 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해선 사이에 있는 컴포넌트 B를 거쳐야하는 것처럼 말이다. 이것이 Props Drilling(혹은 Threading)이다. Props Drilling은 데이터 전달을 구현하는 가장 단순한 방법이지만 코드를 이해하기 어렵게 만든다. 그림을 다시 보자. 데이터 전달을 위해 컴포넌트 B는 필요하지 않은 데이터를 갖게되다. 또한 컴포넌트 A에서 B로 전달될 때와 B에서 C로 전달될 때 Property 이름이 변경된다면 어떨까? C에서 문제가 생겼을 때..

useState를 통해 컴포넌트에서 바뀌는 값 관리하기 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 됨. 이게 바로 리액트의 Hooks 중 하나인 useState에 대해 알아보자! 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 만들어보자. src 디렉터리에 Counter.js 작성. Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; 다음엔 App 에서 Counter 를 렌더링. App.js import React from 'r..

조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미함. 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, isSpecial 이라는 props 를 설정해보면 App.js import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; 여기서 true 는 자바스크립트 값이기 때문에 중괄호로 감싸줌. 그리고, Hello 컴포넌트에서는 isSpecial 이 true 이냐 false 이냐에 따라서 컴포넌트의 좌측에 * 표시를 보여줘보자. 이를 처리하는 가장 기본적인 방법? 삼..

Props를 통해 컴포넌트에게 값 전달하기 props 는 properties 의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용. props 의 기본 사용법 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다면? 이렇게 코드를 작성하면 된다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 이제, Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐 어떻게 하면 되는지 알아보자. Hello.js import React from 'react'; function He..

자바스크립트에서 유사배열과 배열의 차이? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까? var array = [1, 2, 3]; array; // [1, 2, 3] var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...] var els = document.body.children; // HTMLCollection [noscript, link, div, script, ...] 위 예제에서 array는 배열이고, nodes와 els는 유사배열. 둘 다 비슷하게 []로 감싸져 있어 겉만 봐서는 잘 모른다. Array.isArray 메서드(배열인지를 판단해주는 메서드)를 사용해서 뭐가 배열인지 ..