ReactJS

[ReactJS] TIL #10

ReactJS로 To Do List 만들기 리스트에 item 추가하기 ...array명은 array의 모든 item들을 가리킨다 이를 이용하여 리스트에 item을 다음과 같이 추가할 수 있다 const food = [apple, banana] const new_food = [orange, ...food] // new_food = [orange, apple, banana] map() map()은 array 각각의 원소들에 대해 함수를 실행하게 하고 그 결과를 array로 return한다 map 함수의 첫번째 argument를 통해 현재의 item을 가져올 수 있다 const array = ['hello','who','are','you'] array.map(() => "mapped!") // return [..

[ReactJS] TIL #9

Create React App 1. useState() 사용법 create react app에서 useState()은 아래의 코드를 통해 import해야 사용 가능하다 import { useState } from "react"; 이전에 React JS에서 useState를 사용할 때 React.useState()로 사용했던 것과 달리 create react app은 useState()만 작성해도 된다 Count Click Button 예제 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () =>setValue((prev) => prev + 1) return (..

[ReactJS] TIL #8

Creat-React-App prop-types VS Code 터미널에 npm i prop-types를 입력하여 설치한다 prop-types가 적용되어야 할 component의 파일에 아래와 같은 방식으로 코드를 작성한다 Button.js import propTypes from "prop-types"; // import propTypes function Button({text}) { return {text} } Button.propTypes = { text: propTypes.string.isRequired, } export default Button; CSS 한 개의 css 파일인 style.css를 만들어 index.js에 import한다. import "./style.css" > CSS Module..

[ReactJS] TIL #7 _ Create React App

Create React App 일반적인 리액트 어플리케이션은 스크립트를 직접 import해야 한다 그러나 create-react-app을 사용한다면, 위 과정 없이 ReactJS 어플리케이션을 쉽게 만들 수 있다 create-react-app은 개발 서버 접근, 자동으로 새로고침, 즉각적으로 CSS를 포함시키는 유용한 기능들을 포함한다 1. Node.js 설치 https://nodejs.org/ko/download/ Node.js로 작업한다면 component를 import 할 수 있게 하여 파일들을 각각 분리시키고 조직적으로 구성 가능하게 한다 먼저 Node.js 를 설치 후 cmd 를 열어 아래 명령어를 입력한다 # 설치 확인을 위해 아래 두 줄 각각 입력 node -v npx 그리고 위와 같이 뜬다..

[ReactJS] TIL #6

PropTypes PropType은 어떤 타입의 prop을 받고 있는지 체크해준다 타입 검사 먼저 PropTypes 패키지를 사용하기 위해 위 script 소스를 추가해준다 Btn.propTypes = { // props 값의 타입 제시 text: PropTypes.string, fontSize: PropTypes.number } function App() { return( ) } 위와 같이 타입을 제시해주면 타입을 벗어난 경우 아래와 같은 경고 문구를 콘솔창에 띄운다 isRequired 그리고 prop 값이 필수적인 경우 .isRequired를 덧붙이면 된다. Btn.propTypes = { text: PropTypes.string.isRequired, fontSize: PropTypes.number...

[ReactJS] TIL #5

부모의 상태를 바꾸는 함수 만들기 아래는 onClick 이벤트리스너를 통해 부모 component의 상태를 바꾸는 예이다 React.memo() memo는 memorize를 뜻한다 이를 통해 useState를 통해 props가 변경되지 않은 특정 componenet를 re-render 되지 않도록 할 수 있다 이는 변경사항이 있는 component만 re-render하게 하여 불필요한 render을 하지 않을 수 있게 한다

[ReactJS] TIL #4

Props Props 부모 component로부터 자식 component에 데이터를 보낼 수 있게 해주는 방법 Style은 같지만 Content만 다른 버튼 두 개 만들기 동일한 style에 content만 다른 버튼 두 개를 생성하려면 style 속성을 지닌 Btn function을 하나 작성하고 화면에 각각 다른 content를 전달하는 두 개를 render하면 된다 이를 전달하는 방법은 Btn function이 의 props를 function의 () 안에 parameter로 전달하는 것이다 function Btn({propsA}){ return {propsA} } function App(){ } function Btn(hello){ return {hello.propsA} } function App(..

[ReactJS] TIL #3

Modifier 함수에서 State를 바꾸는 방법 /* modifier 함수 이용하여 State 바꾸는 방법*/ const [counter, setCounter] = React.useState() // 1) 직접 값 지정 setCounter(5) // 2) 변수 직접 이용 setCounter(counter + 1); // 3) 현재 값 이용 setCounter((current) => current + 1); 시간 분 환산 앱 만들기 const root = document.getElementById("root"); function App() { const [amount, setAmount] = React.useState(0); const [flipped, setFlipped] = React.useState..

[ReactJS] TIL #2

State state 기본적으로 데이터가 저장되는 곳을 뜻한다 ReactJS에서 업데이트되는 변수 나타내기 Vanilla JS 와의 차이 Vanilla JS 는 HTML 내의 요소가 업데이트될 때 그 요소의 부모들이 함께 업데이트되지만 React JS 는 바뀌는 요소만 업데이트 된다 React JS 에서 render을 하면 전체를 다시 생성한 후 교체할 것이라고 생각된다 그러나 render은 바뀐 부분만 새로 생성할 수 있게 한다 값을 업데이트하는 좋지 않은 방법 변수를 업데이트하였을 때 UI도 바뀌어야 하므로 rendering도 동반해야 한다 따라서 이 방법은 번거롭다 const root = document.getElementById("root"); let counter = 0; //JSX는 중괄호 {..

[React JS] React JS 입문 & JSX

00. React 를 사용하기 위해서는! 아래의 source를 import 해줘야 한다 01. ReactJS 코드 어려운 방식으로 작성하기 createElement는 현직 개발자들이 사용하지 않지만 ReactJS의 기초이자 핵심이다 /*어려운 방식으로 React-JS 코드 작성하는 방법*/ const root = document.getElementById("root") // element 가 배치될 위치 const span = React.createElement("span", {id: "sexy-span"}, "hello"); // span 생성 // 위 함수의 argument 작성을 통해 element를 생성함 // argument 1) 괄호 안에 태그명을 넣어 element를 생성함 // argume..