react

리액트 컴포넌트를 만들때는 상단에 import React from 'react'; //리액트를 불러와 사용하겠다컴포넌트는 함수형, 클래스형 두가지컴포넌트 이름은 대문자로 시작 그리고 중간중간 문장 끝날때마다 세미콜론은 취향~그리고 맨 마지막엔 export defaul

JSX는 리액트에서 컴포넌트의 생김새?를 정의할 때 사용하는 문법우리가 JSX로 작성한 코드는 Babel이라는 도구를 통해 JS 코드로 바뀐다!!Babel 이란...?Babel을 통해 React 안의 createElement라는 함수를 통하여 컴포넌트를 만들는 것! 매

props는 properties의 준말컴포넌트를 사용할때 특정 값을 전달해주고 싶을때 사용함!전달한 props는 객체 형태로 리턴함값을 전달할 때는,이렇게 사용하면 되고,값을 전달받은 해당 컴포넌트에서는 \+ props를 입력받을 때, 비구조화 할당 사용해서 편하게 쓸

조건부 렌더링이란, 특정 조건이 참인지 거짓인지에 따라 다른 것을 보여주는 것\-> true or false 일때, 다른 결과값을 보여줌 ∴ 내용이 달라져야 할 때 사용함!!\+ JSX에서 null, false, undefined를 출력하면 아무것도 안나옴! but

React 16.8 버젼에 새로 도입된 Hook이라는 개념을 통해 함수형 컴포넌트에서도 상태관리...등의 기능이 가능해졌다...!useState 는 Hook 중 하나로 이 함수를 사용하면 함수형 컴포넌트에서도 상태(state) 관리를 할 수 있다.우선 맨 위에서 와 같

이번에는 숫자 값이 아닌 input을 통해 입력받은 문자열의 상태를 관리.input 태그에 문자열을 입력하면, 바로 아래 실시간으로 입력한 문자열이 표시되고, 초기화 버튼을 누르면 입력한 문자열이 삭제되는 예제.이번엔, 문자열을 관리하니 useState 함수를 이렇게

저번 예시와 다르게 이번엔 인풋을 여러개 관리해야 하는 상황이다!이때 처음 드는 생각은 \*\*useSate 함수\*\*와 onChange 함수를 여러번 정의하고 쓰면 되는거 아닌가 하는 생각인데 그것은 가장 최선의 방법은 아니다!가장 좋은 방법은 input에 name

HTML과 JS를 사용할때, DOM에 접근하거나 선택할 일이 있으면, getElementById나 querySelector 등의 DOM selector 함수를 사용함.React를 사용하는 경우에서도 특정 DOM에 접근할 일이 있다. 특정 엘리먼트의 크기/위치를 알아

어떠한 정보가 객체 형태로 담겨져 있는 배열을 화면에 뿌려줘야할 땐 어캐 해야할까..?이러한 정보가 있다고 할때, 우선 제일 무식하고, 비효율적으로 작성해 보겠다.이렇게 작성을 하면, 각 user를 출력하는 부분이 반복된다.이 반복되는 부분을 수정하기 위해 새로운 Us

이번에는 이전 시간에 배운 useRef를 활용해 컴포넌트 안에 변수를 만드는 법에 대해 설명만약 컴포넌트 안에서 let 키워드를 사용하여 변수를 선언하면, 해당 컴포넌트가 생성될 때마다 해당 변수는 해당 값으로 계속 선언됨. (다음에 리렌더링되어도 값이 초기화 됨)

배열에 항목 추가를 할 때는 기존의 항목을 유지시키면서(불변성을 지켜주면서) 추가를 해줘야 함.그래서 push, splice, sort등의 함수를 사용하면 안된다.불변성을 지키며 배열에 새 항목을 추가하는 방법에는 spread 연사자를 이용하는 법, concat 함수

배열에 항목 삭제를 할 때는 기존의 항목을 유지시키면서(불변성을 지켜주면서) 추가를 해줘야 함.그래서 삭제할 경우에는 filter 함수를 사용하여 구현한다.filter 함수 는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만드는 함수 이므로,어떤

앞선 예제에서 계정명을 누르면 글자색이 초록색 ⟷ 검은색 이렇게 토글하는 기능을 구현할 예정이 기능을 수행하려면 먼저, users 배열에 각 user 별로 active라는 boolean 속성을 부여해야 함.그리고 App.js에서 active 값을 반전 시켜줄 함수 on