개발자 지망생의 발전 과정 개발자 지망생의 발전 과정

React RestAPI - 1   우선 값을 주고받기 위해 JSX에 태그를 추가하자. 1. 체크박스, 버튼 생성Day.jsexport default function Day() { const day = useParams().day; const wordList = dummy.words.filter(word => word.day === Number(day) ); console.log(wordList); return Day {day} { wordList.map(word => ( ..

React 라우터   먼저 라우터 설명하기 전에, 인터넷에 떠도는 리액트 영상들과 다른 점이 있다.예전에 나온 리액트는 Switch라는 것이 있었는데, Route를 감싸는 용도였다.또한 exact라는 속성도 있었는데 그 둘 다 리액트 버전이 최신화 되면서 더 이상 사용하지 않는다. 라우터를 설치해야 하므로 터미널에 `npm install react-router-dom`을 입력해주자설치가 끝났으면 임포트를 해와야 한다.import {BrowserRouter ,Route ,Routes} from "react-router-dom"; 라우터를 이용해 화면을 만든 예시를 간단하게 살펴보자  1. 라우터 사용 예시App.jsfunction App() { return ( ..

React 더미 데이터 생성, map() 반복   1. 더미 데이터 생성먼저 레이아웃 만들어주자너무 길어질 거 같으니까 css 코드까지 올리지는 않겠다. Header.jsexport default function Header() { return ( 영어 단어 암기 단어 추가 날짜 추가 );} 화면 이제 데이터를 만들어보자. data.json{ "days": [ { ..

React props  properties의 약자이다. 먼저 함수형 컴포넌트에서 매개변수를 이용하는 방법을 살펴보자 App.jsfunction App() { return ( );} Temp.jsfunction Temp(props) { const [name, setName] = useState("A"); return ( {name}({props.age}) { setName(name === "A" ? "B" : "A"); }} ..

React 각 컴포넌트 별 CSS 적용   아래 코드를 보면서 문제 상황을 보자.App.jsfunction App() { return ( App );} Temp.jsfunction Temp() { return ( Temp );}  App.css.box{ width: 100px; height: 100px; background: skyblue;} 아래는 화면 미리보기 App.css에 적은 코드지만 Temp.js에서 JSX로 작성한 코드에도 적용이 된다.사실 이건 기존 HTML, CSS, Js를 사용해봤으면 당연한 것이다.하지만 이렇게 되면, CSS가 많아졌을 때 보기가 너무 힘들 것이다. 아래와 같이 수..

React Component  오늘도 먼저 잠깐 코드 작성 시 주의점을 살펴보고 가자.우리가 지금 return 문 안의 소괄호 안에 HTML 태그를 사용 중인데,반드시 하나의 HTML 태그만 시작되고 끝나야 한다.아래와 같은 경우는 허용하지 않는다.return ( );위 처럼 하려면, 4개의 div 태그를 감싸는 큰 div 태그를 만들고 그 안에 집어넣어야 한다. 이제 Component를 사용하는 것을 보자.  1. 사용법function Example() { return ( );}위와 같이 선언하고, 아래 처럼 사용한다. //...~~ 이러면 리턴문에 있는 값이 내가 컴포넌트를 사용 중인 곳에 반환된다. 그리고 여러개의 태그가 나열될 때, 전체를..

React 이벤트 리스너(핸들러)   먼저 이 장에 앞서, 코드로 이것저것 하다 보면 터미널에 노란 글씨로 `warning`이라고 나오는 경우가 있다.이 것은 에러는 아니고, 잘못된 코딩 습관을 잡아주는 `eslint`라는 라이브러리다.만약 사용하기 싫다면 /* eslint-disable */ 를 사용하면 된다./* eslint-disable */ 이제 이벤트 함수 사용하는 법을 알아보자  1. 버튼 생성어제의 코드를 이렇게 수정하자. {글제목[0]} 👍 1 8월 20일자  화면 상으로는 다음과 같다.  2. 이벤트 함수 사용이벤트를 사용할 때, 기존 js의 경우 아래와 같이 코딩했다.{글제목[0]} 👍 1  하지만 리액트의 경우 쌍따옴표가 아닌 중괄호를 이용하고, 내부엔 함수가 들..

React state란?   리액트에서 state는 component의 상태를 의미한다.component는 뒷 장에서 자세히 설명하겠다. 유동적인 변수를 사용할 때 화면에 그려지는 변수도 정상적으로 변경되길 원한다면 사용한다. 주의점은 렌더링이나, 데이터의 흐름에 사용되는 것만 state를 이용해야 한다. State가 변경될 경우 Component가 재렌더링되기 때문에,렌더링과 데이터 흐름에 관련 없는 값을 포함하면불필요한 경우에 Component가 다시 렌더링 되어 성능을 저하시킬 수 있기 때문이다. 그래서 렌더링과 데이터 흐름에 관련 있는 값만 State에 포함하도록 해야 하며,그렇지 않은 값은 Component의 인스턴스 필드로 정의하면 된다. 지금은 자바스크립트에서 변수를 이용하듯이, 리액트에서는..