당연한 개발자가 되자

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 의 콜백 함수의 첫번째 파라미터 값에는 배열의 데이터가 하나씩 순서대로 들어오고, 두..

Component(컴포넌트) 란? html 코드가 길어지면 가독성이 떨어지는 단점을 보완하기 위해 만들어진 기능입니다. 긴 html 코드를 태그 하나로 축약해서 사용할 수 있습니다. 컴포넌트 함수의 이름은 대문자로 시작하는 것이 규칙입니다. ( 대문자로 시작하는 함수는 컴포넌트라고 생각하면 됩니다.) 함수를 만드는 또 다른 방식 Component 를 언제 사용하는가? 반복적인 html 이 있을 때 큰 페이지들 자주변경되는 것들 Component 는 꼭 필요할 때만 사용합니다. 만약에 하나의 return 안에서 태그를 꼭 두개 사용해야하는 상황이 생긴다면? 그럴때는 의미없는 div 태그로 전체를 묶어주면 됩니다. function Modal() { return ( 제목 날짜 상세내용 ); } 이 의미없는 d..

State 란 무엇인가 자료를 잠깐 저장할 때는 변수를 사용하면 됩니다. 리액트에는 자료를 잠깐 저장할 때 변수 말고도 State 라는 문법이 존재합니다. State를 선언하는 법 State 를 사용하고 싶을 때는 이렇게 뽑아내서 사용합니다. 뽑아내서 사용할 때는 대괄호 안에 왼쪽에 있는 이름( 여기서는 a )은 State 의 실제 자료 즉, ’남자 코드 추천’ 이 됩니다. 대괄호 안에 오른쪽에 있는 이름은 State 변경을 도와주는 함수입니다. State 를 뽑아내서 사용할 때 사용하는 대괄호 문법은 js 의 Destructuring 문법입니다. Destructuring( 디스트럭처링) 문법이란 배열( array ) 에 있는 값을 따로 변수로 빼서 쓰고 싶을 때 사용하는 문법입니다. 변수와 비슷한데 왜..

React 프로젝트의 폴더들의 역할 node_modules 프로젝트 구동에 필요한 모든 라이브러리를 보관하는 폴더입니다. public 정적인( static ) 파일들을 모아놓는 곳 입니다.( html 파일 이나 이미지 파일 등 ) src 코드를 짜는 곳 입니다.( 모든 소스코드가 여기에 들어갑니다. ) package.json ( 프로젝트 설정 파일 ) 프로젝트의 정보들이 담겨있습니다. 프로젝트의 설정을 변경할 수 있습니다. ( 프로젝트 이름, 버전 등 ) 메인 페이지가 html 파일이 아닌 js 파일인데 문제없이 브라우저에 화면이 보이는 이유 기본적으로 App.js 에 적힌 html 코드들을 index.js 파일이 public 폴더의 index.html 파일로 집어넣어주기 때문에 가능한 것입니다. rea..