1. 함수형 컴포넌트 function App() { return ( 우리가 클래스형 컴포넌트를 사용하는 이유는 state 를 사용하기 위해서이다. state는 객체 형태의 데이터이고 state를 사용하려면 반드시 클래스형 컴포넌트 안에서 소문자를 이용하여 state라고 적으면 된다. 2. state의 쓰임 state는 동적 데이터를 저장할 수 있어야 한다. 동적이라는 것은 값을 바꿀 수 있다는 말인데, 즉 값을 바꿀 수 있도록 코드를 작성해야 한다. (예를 들면 사용자 동작에 따라 state의 count를 바꿀 수 있도록) react는 state를 직접 변경하지 못하게 한다. add = () => { // console.log('add'); this.state.count=1; }; minus = () =..

1. 리액트가 반환한 컴포넌트 renderFood()는 map() 함수가 반환한 리액트 컴포넌트를 출력하려고 사용해본 코드이다. function renderFood(dish){ return ; } // const renderFood = dish => ;도 같은 표현이다. function App() { console.log(foodILike.map(renderFood)); return( /*;*/ {/*{foodILike.map(dish=>())}*/} {/*위에서 food라는 컴포넌트를 만들고 여기서 사용*/} {foodILike.map(renderFood)} ); } 0번 인덱스에 대해서 구체적으로 보고 싶다면 다시 열어서 본다. 콘솔창을 보면 아래와 같은 에러가 발생하는데 key의 값이 실제로 없어서..

1. 컴포넌트를 효율적으로 출력하기 일단 이 사진은 컴포넌트를 많이 만들어야 한다면 이 방법은 효율적이지 않다. 새 음식을 추가할때마다 를 복사해야 한다. 또한 서버에서 음식 데이터를 받아 출력하는 경우, 음식 데이터의 개수를 알 수 없다면 더 문제가 된다. 그래서 이와 같이 배열을 만들고 안에 속성값을 넣음으로써 많은 양(?)의 컴포넌트도 대비한다. 2. map() 함수 map() 함수의 인자로 전달한 함수는 배열 friends의 원소를 대상으로 실행 friends에는 4개의 원소가 있으니 함수는 4번 실행된다. 두번째는 그 함수가 반환한 값이 모여 배열이 되고 > 그 배열이 map() 함수의 반환값이 된다. console.log에서 current가 출력되고 return 0;에서 0을 반환한다. 이름 ..

1. npx 표현1 : 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지 표현2 : (프로젝트 이름) 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지움 - 컴퓨터 공간을 낭비하지 않는다, 설치를 실행할 때마다 새로 다운로드 하기 때문에 항상 최신 상태 2. React에서의 index.html * 리액트 동작 원리 * 표현1 : 왜 사이가 비어 있었는지 알 수 있을거야. 리액트는 우리가 작성한(수정한) 프로젝트 폴더에 있는 코드를 자바스크립트를 이용해서 해석해. 그리고 해석한 결과물을 index.html로 끼워넣어. 우리가 App.js나 index.js와 같이 작성한 파일들을 리액트가 해석해서 index.html에 끼워 넣는거야 표현2 : public이라는 디렉터리에는 index..

1. 리액트는 컴포넌트로 구성되어 있으며 컴포넌트는 UI를 독립적이고 재사용이 가능하도록 나눈 조각이다. 2. JSX 영역이 실제 화면에 그려지는 부분이며 return() 함수 안에 작성한다. html 처럼 생겼지만 자바스립트이다. JS 영역의 처음 시작은 태그로 감싸주거나 로 작성한다. 한 줄은 상관이 없지만 한 줄 이상은 그룹형(Fragment) 또는 Div로 묶어야 한다. Fragment에 큰 뜻은 없으며 단순히 태그 감싸기 용이다. 3. webpack은 html,css,js 등을 하나로 묶어 (파일들을 묶어) 한 번에 실행시켜주는 도구이다. 4. ex) let [추천,추천변경] = useState(0); 과 같은 경우는 맨 앞에 있는 값인 '추천'의 초기값을 0으로 셋팅하겠다는 의미이다. 5. 리..

1. React에서 Node.js를 사용하는 이유? Node.js를 설치하게 되면 npm(Node Package Manger)이 설치된다. Node.js와 React가 직접적인 관련은 없지만, React 프로젝트 개발 시 필요한 주요 도구들(바벨,웹팩 등)을 Node.js의 npm이 설치해주는 것이다. 2. 리액트 프로젝트를 VSCode에서 쉽게 생성하는 방법 Terminal에 npx create-react-app 프로젝트 이름 npx는 npm의 아들이며 npm@5.2.0 버전부터 새로 추가되었다고 한다. npx가 없을 당시에는 npm을 통해 React app을 생성했는데 npm install -g create-react-app ~ 을 했었는데 문제점이 있었다. CRA(Create React App:리액..