당연한 개발자가 되자

React 의 Lifecycle mount ( 페이지가 눈에 보이도록 장착 ) update ( 페이지가 업데이트 될 때 ) unmount ( 페이지가 제거될 때 ) 컴포넌트의 Lifecycle 에 간섭하는 방법 class 컴포넌트에서 사용하는 방법( 옛날 방식 ) 함수형 컴포넌트에서 사용하는 방법 useEffect 라는 훅을 사용합니다. useEffect 훅을 사용하는 이유 useEffect 는 실행시점이 약간 다릅니다. 컴포넌트 안에 코드들은 그냥 바로 실행이 되는데, useEffect 안에있는 코드들은 html 랜더링이 다 끝나고나서 실행이 됩니다. 이것이 왜 장점인가 복잡하고 시간이 오래걸리는 코드가 있다고 할 때 useEffect 없이 그냥 코드를 작성하게되면 이 연산이 끝나는 1 ~ 2 초 정도..

styled-components 란 css 설정을 전부 다 js 파일에서 할 수 있도록 해주는 라이브러리 입니다. 설치하기 터미널을 열어서 아래의 명령어로 설치합니다. npm install styled-components 사용법 styled-components 를 사용하려면 먼저 import 를 해줘야합니다. 그 다음에 아래와 같이 빽틱(키보드 ~ 키)을 사용해서 css 코드를 작성해줍니다. 이렇게 하면 하나의 컴포넌트가 생기게 됩니다. 컴포넌트니까 변수에 담아서 사용하시면 됩니다. 컴포넌트이므로 맨앞글자 대문자로 작성해주셔야합니다. 그리고 만약에 여러가지 버튼색이 필요하다라고 한다면, props 문법을 사용하면 됩니다. ‘${ }’ 를 사용해서 props 를 설정해두면 component 를 사용할 때 ..

React Router란? 설치하기 & 기본설정 터미널에 아래의 명령어를 입력해서 라이브러리를 설치합니다. # @6 은 버전을 의미합니다 npm install react-router-dom@6 # 또는 yarn add react-router-dom@6 그 다음에 인터넷에 react-router-dom 6 버전 이라고 검색해서 설명서에 적힌 설치과정을 그대로 따라해주시면 됩니다. index.js 로 가서 아래의 코드들을 추가합니다. 이러면 일단 설치와 기본설정은 완료입니다. 사용법 외부 라이브러리의 사용법은 필요할 때 마다 검색해서 찾아서 사용하면 됩니다. 라우터는 먼저 몇가지 import 가 필요합니다. 그 다음에 아래와 같이 path 별로 페이지를 나누어줍니다. ( path 에는 해당 경로를, elem..

export 란 js 파일을 나누고 싶을 때 사용합니다. 나눠진 js 파일에 필요한 데이터를 export 해서 다른 js 파일에서 사용할 수 있도록 합니다. (함수, component 등 도 export 가능합니다.) import 란 어딘가에서 export 된 파일이나 이미지파일 같은 것들을 가져와서 사용할 수 있게 해줍니다. 응용하기 map 을 사용해서 data 의 갯수만큼 컴포넌트를 만듭니다. Items 컴포넌트

리액트에서 이미지 넣는법 css 파일에서 넣을때는 평소와 똑같이 url(이미지 경로) 같은 방법으로 하면 됩니다. 하지만 리액트에서 넣을 때는 항상 import 를 먼저 해줘야합니다. 그 다음에 import 할 때 정했던 변수명으로 사용해야합니다. 그런데 import 를 사용하게되면 문제점이 이미지가 100개 있으면 import 를 100개 해야한다는 의미인데 그러면 너무 비효율적일 수 있습니다. 그래서 import 말고도 또 다른 방법으로 public 폴더를 이용하는 방법이 있습니다. 리액트가 배포될 때는 src 폴더에 모든 파일이 압축되어서 배포되기때문에 파일명이 변하거나 합니다. 그러나 public 폴더에 있는 파일들은 압축이되지 않고 배포되기 때문에 public 폴더에 있는 파일을 import 없..

React-Bootstrap 설치 React 에서 React-Bootstrap 같은 외부 라이브러리를 설치해서 사용하는 방법은 대부분 비슷합니다. React-Bootstrap 를 검색해서 사이트로 들어가서 아래의 버튼을 클릭해줍니다. 그 다음에 써있는 설명대로 설치부터 차례대로 진행하시면 됩니다. 아래의 설치 명령어 사용해서 설치하시면 됩니다. 그 다음에 필요한 import 들을 해줍니다.(둘 중 하나 선택) App.js 같은 곳의 맨 위에다가 아래의 import 문구를 추가해주는 방법이 있습니다. index.html 파일의 head 태그 안에다가 아래의 link 태그를 복사 붙여넣기 해줍니다. 그리고 React-Bootstrap 의 모든 태그들은 Component 이므로 반드시 아래처럼 Componen..

Class 문법은 옛날 문법이므로 최근에는 function 문법을 권장합니다. Class 문법을 사용한 Component 생성 먼저 상단에 React 를 import 합니다. Class 문법의 Component 의 기본 형식은 아래와 같습니다. Class 문법을 사용한 State 만들기 Class 문법에서 setState 는 State 를 갈아 끼우는 느낌이 아니라, 변경사항만 딱 변경해주는 느낌입니다. Class 문법에서 props 사용하기 Class 문법에서는 부모에서 보내준 props 를 constructor 로 받도록 되어있습니다. 아래와 같이 받아서 this.props 해서 사용하면 됩니다.

input 태그란 유저가 여러가지 값들을 입력할 수 있도록 해주는 태크입니다. 종류가 매우 많으니까 필요할 때 찾아서 사용합시다. 대표적인 input 태그 input 태그의 이벤트 핸들러 이벤트 핸들러란 유저가 어떠한 행동을 했을 때 어떤 동작을 하도록 만들 수 있는 기능입니다. 이것또한 종류가 매우 많으므로 필요할 때마다 찾아서 사용합시다. 대표적인 이벤트 핸들러 이벤트 핸들러를 이용해서 입력값 받기 이런식으로 event 객체를 받아와서 event.target.value 하게되면 input 태그의 값을 가져올 수 있습니다. 여기서 문제점은 State 를 처리하는 함수는 비동기 처리가 되기 때문에 비교적 실행 시간이 오래 걸리는 setInput 이 처리되기 전에 console.log 가 먼저 실행된다는 ..

props 란 자식이 부모 Component 에 있는 State 를 사용하고 싶을 때 사용하는 기능입니다. React는 기본적으로 단방향(하향식) 데이터 바인딩을 합니다. (부모 → 자식 = O) (자식 → 부모 = X) 그래서 부모 Component에서 props로 데이터를 넘겨주지 않으면 자식Component에서 부모 Component의 데이터를 사용하거나, 변경할 수 없습니다. props 사용법 사용하는 방법은 부모태그에서 자식 컴포넌트를 사용할 때 아래와 같이 State 를 넘겨줄 수 있습니다. (이름은 보통 State 의 이름과 똑같이 적어줍니다.) 그리고 자식 Component 에서 파라미터에 변수명 하나를 적어줍니다.(보통 props 라고 적습니다.) 그렇게하면 이제 props.subject..

map 함수란? 모든 Array 자료 뒤에는 map() 이라는 기본 함수를 붙일 수 있습니다. 그리고 map 함수를 사용할 때는 콜백 함수를 집어넣습니다. map 함수는 배열의 갯수만큼 콜백 함수를 실행해줍니다. 콜백 함수의 파라미터 값에 변수명을 적어주게 되면 배열에 있는 값들이 하나씩 그 변수로 들어오게 됩니다. 콜백 함수에 return 을 적으면 return 된 값을 하나씩 배열에 넣어줍니다. return 의 중괄호 안에서 태그 반복해서 생성하는 법 중괄호 안에서는 for, if 등을 사용할 수 없습니다. 그래서 아래와 같이 map 함수를 사용하거나, 배열안에 html 태그를 담거나해서 사용할 수 있습니다. map 의 콜백 함수의 첫번째 파라미터 값에는 배열의 데이터가 하나씩 순서대로 들어오고, 두..