map() 함수 반복문이란? 어떤 코드를 반복하고 싶을 때 사용! 리액트는 html도 반복문으로 반복시킬 수 있음! 하지만 JSX 중괄호 내에 for은 넣지 못한다. 그럼 어떻게 할까❓ map이라는 함수 활용하자! *map함수란? array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을때 .map( ) 사용 만약 array 내에 모두 2를 곱해주고 싶다면❓ var array = [2,3,4]; var newArray = array.map(function(a){ return a * 2 }); array안에 있는 하나하나의 값들이 꺼내져서 2가 곱해진다. a라는 파라미터는 array안에 하나하나의 데이터를 의미! newArray = [4,6,8] 이 된다! { 반복할데이터.map(()=>{ return }..

오늘 배울 내용!? 모달창으로 상세페이지 띄우기 주의 할 점!🚨 리턴 ( 소괄호 ) 안에 div를 여러개 사용할 수 없다. return 안에는 항상 하나의 html 태그가 시작하고 끝나야 한다. → 이런 형태 불가능! (큰 div 안에 넣으면 가능해짐!) html이 많아지고 복잡해지면 보기 싫어진다. 이럴때 사용하는 리액트 문법은 html 태그를 간편하게, 한 단어로 줄여서 쓸 수 있는 문법은 컴포넌트 문법이다! 장점 ? 이해가 쉽고 깔끔하게 정리가 가능하다. 컴포넌트 안에 또다른 컴포넌트를 만들 수 있다. 즉 관리가 편하다. 아래처럼 복잡한 코드보단 위처럼 짧은 코드로 가능! 그렇다면 컴포넌트는 어떻게 만들까❓ function Modal(){ //이름 짓고 return ( //원하는 html 담고 ) ..

리액트 코딩 강의를 듣다가 리액트는 Deep copy를 사용해야 한다는 말을 듣고 Deep copy의 개념과 또다른 용어 Shallow copy를 정리하고자 한다. https://replit.com/ 사이트에서 간단하게 코딩을 해보겠다. 이때 사용할 것은 각각 영어를 번역하면 Deep copy 는 깊은 복사, Shallow copy 얕은 복사이다. 이것의 뜻은 뭘까? 우리가 프로그래밍 언어를 만드는 관점에서 보자 let num1 = 1; let num2 = num1; num2 = 2; console.log(num1,num2) // num1 : 1, num2 : 2 위와 같은 결과를 깊게 생각해보면, 1번째는 num1 :1 num : 2 의 값이고 2번째는 num1 :2 num : 2 가 된다. 2번째는 ..

양방형 바인딩을 통해 뷰와 모델의 값을 변경시켜주는데 이런 변화는 복잡한 기능이다. 예를들어 특정 이벤트가 발생했을때 모델의 변화를 일으키고 변화를 일으킴에 따라 어떤 돔을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야하는데 이런 로직은 프레임워크나 라이브러리에서 정해준다. 리액트는 변화가 생기면 그냥 mutation 하지 말고 그냥 데이터가 바뀌면 기존 뷰를 날려버리고 새로 만들어 버리면 어떨까 ? 하는 생각을 가지고 리액트가 개발되었다. 하지만 브라우저는 dom 기반으로 작동 하기때문에 페이지가 새로운 view를 만들어 버리려면 성능적으로 문제가 발생한다. 그래서 존재하는 것이 Virtual Dom 이다. 이는 가상의 돔으로 변화가 일어나면 실제로 브라우저 돔에 새로운것을 넣는 것이..

노란색으로 warnings이 뜨는 이유? eslint 문제! eslint 란? 잘못된 코딩 관습을 잡아주는 문법 체크사항 라이브러리 이런 warnings을 보기 싫으면 ? 상단에 코드 추가 /* eslint-disable */ 문법적 warnings이 사라짐! 예제 1) 좋아요 버튼 만들기 JSX에서 클릭함수는 이렇게 사용한다. onClick = {클릭될 때 실행할 함수} onClick = {()=>{}} //콜백함수로 디자인 가능 camelCase를 사용하고 { 중괄호 }를 사용하고 중괄호 안에는 함수 따봉을 클릭하면 좋아요 수가 올라가게 만들기! 이때 좋아요는 누르면 바로 변하므로, state에 넣어주는 것이 효율적이다. 이때 함수로 state값을 변경하려고 하니 변경이 되지 않았다. 이유는 stat..

jsx문법이란? 자바스크립트 파일 안에서 html을 직관적으로 작성하기 위해 도와주는 react 내장 문법 특징 class 선언 , 리액트는 태그 내에 class라는 키워드를 사용하지 않고 className 을 사용한다. 데이터 바인딩이 쉽다는 점 데이터 바인딩이란? 자바스크립트 데이터를 html에 넣는 작업을 의미documemt.getElementById()... 이럴 필요가 없음! 서버에서 가져온 데이터를 html에 보여줘야함! 넣는 방법은 {중괄호}를 사용하여 변수로 선언, 함수도 렌더링이 가능 로고를 import 해서 이미지를 넣는 방법 , 변수명도 가능 html에 여러가지 속성도 data-binding이 가능한데, html중 style 속성은 object로 ! { 속성명 : 속성값}을 사용, 이..

https://nodejs.org/ko/ node.js 최신 버전으로 설치하기 visual studio code 사용하기! 원하는 폴더를 만들어서 visual studio code에서 file - open folder로 이동 터미널 열어서 리액트 프로젝트 생성 명령을 입력한다. npx create-react-app 프로젝트명 npx : 라이브러리 설치를 도와주는 명령어 (node.js 설치가 잘 되어있어야 이용이 가능하다.) create-react-app : 리액트 셋팅이 다 된 boilerplate, 만들기 쉽게 도와주는 라이브러리 설치 하면 리액트에 필요한 파일이 다 생성이 된다. 코드 짠 것을 미리보기 띄우는 법 npm start 실시간으로 라이브 개발 서버를 띄워줘서 크롬으로 미리보기 가능하다. ..

리액트 설치 없이 간단한 코딩이 가능한 사이트 https://replit.com/ The collaborative browser based IDE Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages. replit.com react 는 spa = 싱글 페이지 어플리케이션으로 웹페이지가 하나밖에 없다. (html 파일이 딱 하나) 이 내용을 자동으로 업데이트 해주므로 refesh 할 필요가 없다. -index.html 기억해두기 -main.jsx html 과 app.jsx파일을 연결해주는 것! 즉 html과..