React

평소 사용하던 html, css와 다르게 스타일을 주기 위한 class명을 넣을때class = " "가 아닌 className = " "을 사용하여 작성합니다.(위에 적용했던 css와 같이 적용하여 실행할시)자바스크립트의 변수선언 방식 var, let, const키워드

array의 갯수(3개)만큼 1을 3번 출력하는 결과를 얻게 됩니다.chrome 개발자도구(F12)콘솔에서 입력시 결과를 확인할 수 있습니다.array의 안에 있는 값인 2,3,4가 출력되는 모습입니다.let array = 2,3,4let newArray = arra

자바스크립에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없습니다 그러나 컴포넌트 2개가 부모 / 자식 관계인 경우에 가능합니다(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부릅니다)부모 컴포넌트의 state를 자식 컴포넌트로 전송할 수 있으며 자식도

Input 태그 사용하기 input 태그를 응용하기 이전에 사용한 태그 설명입니다 글자를 작성할 수 있는 칸을 생성하는 태그 길이를 조절 할 수 있는 칸을 생성하는 태그 연, 월, 일 등 달력을 생성하는 태그 숫자를 생성하고 올리고, 줄일 수 있게 생성하는

리액트에서 컴포넌트를 제작시 function을 이용해 컴포넌트를 제작하지만 class 문법을 사용해서도 컴포넌트를 만들 수 있습니다. 예시 코드를 이용해 만들어 보겠습니다 이후에 테스트 컴포넌트를 이용할때마다 div값에 안녕이 저장되어 출력이 됩니다.

리액트에서 각 페이지를 나누는 기능을 구현할때 사용하는 라이브러리인 router-dom을 배워보겠습니다. 기존 방식(html, css, js)이라면 html 파일 여러개를 제작하여 이용하지만 리액트에서는 html파일을 하나만 사용합니다. router 설치 방식 VS

useNavigate 컴포넌트는 router-dom 라이브러리에서 지원하는 컴포넌트로 Link의 컴포넌트와다르게 함수형을 선언하여 페이지 이동 기능을 구현할때 자주 사용하는 기능입니다.사용을 위해 react-app에서필요한 컴포넌트를 우선 import 시킨 후 시작합니

nested-routes 문법은 특정 웹페이지에서 서브경로를 제작할시 주로 사용합니다또한 여려개의 유사한 페이지를 작성할때 사용되는 문법입니다.서브경로를 제작하기전에 location으로 이동하는 Route 코드를 만들겠습니다URL 주소에 /company 입력할시 div

리액트의 컴포넌트가 늘어나면서 각각의 스타일링을 하게 되면 여러 상황들이 생깁니다.이러한 상황들을 방지하기 위해서 styled-component를 이용하여 스타일을 바로 입힐 수 있습니다.터미널에 라이브러리 설치하는 명령을 입력합니다.설치 후 사용할 컴포넌트에 impo

Lifecycle은 주로 리액트에서 생성한 컴포넌트에 사용하는 개념입니다.컴포넌트 또한 인생이 있다라는 생각으로 가볍게 이해하시면 좋을거 같습니다.컴포넌트 3가지 lifecycle개념을 가지고 있는데 다음과 같습니다이러한 컴포넌트의 lifecycle 개념을 익히는 이유