Buang

Swtich를 불러오려 했더니 에러가 떴다. v6부터 Swtich 대신 Routes라고 작성해야 한다고 한다. 추가로 exact component도 elemnt로 바꾸는 걸 권했다. 아래 예시를 통해 설명하자면 //예전 버전 //v6 버전 Switch를 Routes로 바꾸고, exact component도 element로 바꾼 걸 확인할 수 있다. import {BrowserRouter as Routes} from "react-router-dom"; 당연히 import 부분도 위의 코드처럼 Swtich에서 Routes로 바꿔줘야 한다. import {BrowserRouter as Switch} from "react-router-dom"; 위의 코드처럼 Swtich로 작성하면 안된다.

1. 이벤트 핸들링 등장배경 2. 이벤트 핸들링 코드 예제 * html과 자바스크립트 기초가 있다는 가정하에 작성된 글입니다. * 리액트 컴포넌트와 props를 알고 있다는 가정하에 작성된 글입니다. 1. 이벤트 핸들링 등장배경 버튼을 클릭하면 hi라는 알람이 뜨는 코드를 작성했다. 위에서 onClick은 버튼을 클릭했을 때 이런 사건(이벤트)을 일으켜줘!란 의미로 위에선 버튼을 클릭했을 때 알람(alert)으로 hi가 뜨도록 해줘라고 작성되어 있다. 리액트 컴포넌트의 경우 props를 통해 속성을 지정해 줄 수 있었다. * 리액트의 props를 잘 모른다면? '리액트 props가 도대체 뭘까?'를 참고해 주세요! 이제 속성뿐만 아니라 이벤트 기능도 넣어주고 싶다. 위에처럼 버튼을 클릭하면 알람이 뜨는 ..

'소플의 처음만난 리액트' 강의 필기록입니다. 1. JSX가 뭘까? 자바스크립트를 영어로 JavaScript라고 한다. 이 자바스크립트를 줄여서 JS 라고 한다. JSX에서 JS는자바스크립트를 의미한다. 그렇다면 맨 마지막의 X는? X는 Extenstion에서 x를 따온 것으로 자바스크립트의 확장 문법(A Syntax extenstion to Javascript)란 뜻을 가지고 있다. 쉽게 말해 JSX는 자바스크립트와 연관되어 있으며 자바스크립트 문법을 확장시킨 게 JSX 라고 할 수 있다. 그런데 문법을 확장 시켰다는 데 뭘 확장시킨 걸까? JSX는 JavaScript 에 더해 HTML + XML 까지 합쳐진 코드를 의미한다. JSX의 예제코드를 보면 쉽게 이해가 갈 것이다. let welcomeMes..

'컴포넌트'를 알고 있다는 전제 하에 작성됩니다. 아직 컴포넌트에 대해 모르신다면 '컴포넌트는 뭐고, 왜 쓰는 걸까?'를 참고해 주시면 감사하겠습니다. 더보기 리액트 컴포넌트 1. 리액트 컴포넌트 리액트에서 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트 이 두가지로 나뉜다. 원래 리액트 컴포넌트는 클래스 컴포넌트를 사용했었는데 클래스컴포넌트가 사용하기 불편해 함수 컴포넌트가 등장했다. 2. 함수 컴포넌트(Function Componenet) function Welcome(props) { return 안녕, {props.name}; } 위의 코드는 함수 컴포넌트의 간단한 예제다. Welcome이란 이름을 가진 함수로, 하나의 props 객체를 받아서 안녕이란 인삿말이 담긴 리액트 * 생활코딩님의 React 2..

1. 컴포넌트 정의 컴포넌트는 사용자 정의 태그라고 할 수 있다. 카페에 갔는 데 바나나 우유와 딸기 우유만 판다고 해보자. 나는 바나나도 딸기 우유도 마음에 들지 않았다. 초코 우유를 먹고 싶었다. 그래서 직접 초코 우유를 만들었다. 이렇게 기존에 있던 것(바나나 우유, 딸기 우유)에서 벗어나 새로운 것(초코 우유)을 내가 직접 만드는 것이 컴포넌트의 개념과 유사하다. 이 개념을 숙지하고 아래 글을 읽어도 좋고, 만약 html을 접해봤다면 더 정확한 개념 이해를 위해 아래 '더보기'를 추가로 보는 걸 추천한다. 더보기 html을 안다면 태그라는 걸 들어봤을 것이다. 태그는 list의 약자로 '목록'을 만드는 태그다. li 태그 외에 head태그, ol 태그, body 태그 등 각자 특정한 기능을 가지고..