Mo's Develog

리액트에서 html코드를 짤 때 유의점이 있는데 return()안에 두개의 html태그 나란히 적기 이런거 안됩니다. return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다. 위와같은 것은 안된다는 것이죠. 그래서 굳이 두개를 나란히 적고 싶으면 저렇게 하나의 div로 또 감싸거나 해야합니다. 의미없는 div 쓰기 싫으면 이걸로 감싸도 됩니다. fragment 문법이라고 합니다. 복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. Component라고 합니다. 이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. 위와 같..

array state는 어떻게 수정함? 이렇게 하면 됩니다. state 변경함수는 () 안에 넣은걸로 기존 state를 갈아치워주니까 저렇게 집어넣으면 됩니다. 약간 프로그래머 스타일로 다시 만들어보면 지금 코드는 확장성이 부족합니다. [ ] 안에 과일이 3개밖에 없어서 망정이지 100개 들어있으면 어쩔 것입니까 onClick 안의 코드도 매우 길어지겠군요. 그러니까 기존 state를 다 복붙하지말고 기존 state를 첫 글만 살짝 바꿔서 state변경함수에 집어넣는 식으로 개발해봅시다. 위와 같이 해도 됩니다. array 자료안의 X번째 항목을 변경하고 싶으면 array자료[X] = '바꿀값' 이렇게 하면 됩니다. 그래서 자료를 바꾸고 저기 state변경함수에 집어넣은 겁니다. 근데 이런거보다 더 나은..

State변경하는 법을 알아보기 전에 JSX에서 사용하는 간단한 이벤트사용법에 대해 알아보고 갑시다. 일반 html에서는 위와 같이 하면 됩니다. JSX에서는 위와 같이 합니다. 1. Click이 대문자인거 2. {} 중괄호 사용하는거 3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거 를 기억해주십시오. onClick={}안에 함수를 적는게 뭔소리냐? onClick={} 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣어주시면 됩니다. 그래서 이러면 를 클릭시 함수안에 있던 자바스크립트가 실행됩니다. 이게 리액트에서 어떤 html 요소 클릭시 원하는 코드실행하는 법입니다. 근데 함수 만드는게 귀찮으면 이렇게 함수를 그 자리에서 직접 만들어버려도 가능합니다. Q. 함수만들 ..

변수에 잠깐 데이터 저장하고 html에 {데이터바인딩}도 할 수 있다고 했는데 중요한 데이터를 저장할 땐 변수 대신 state를 만들어씁니다. state는 왜 쓰는지, state는 어떻게 만들어서 데이터를 저장하는지 알아봅시다. state 만드는법 이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다. 이번엔 state를 이용해 데이터를 잠깐 저장해보도록 합시다. 맨 윗줄에 import {useState} from 'react' 하고 원하는 곳에서 useState('저장할 데이터') 쓰면 state에 자료를 잠깐 저장할 수 있습니다. 그리고 저장한 자료를 나중에 쓰고 싶으면 let [a,b] = ..

리액트에서는 그냥 기존처럼 html css짜서 웹페이지를 만들어나가면 됩니다. 뭔가 어렵고 복잡하게 코드 짜야하는 것 아닙니다. but, html대신 JSX라는걸 쓰는데 이것의 사용법을 알아봅시다. React의 App.js는 메인페이지다. App.js가 여러분의 메인페이지입니다. 여기 이미 채워져있던 쓸데없는 html들은 싹 비우고 시작합시다. 하나만 남기면 됩니다. JSX 문법 1. html에 class 넣을때는 className 잘보면 평소에 짜던 html/css와 다른 부분이 있습니다. 스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 이렇게 쓰는 부분이 좀 다른데 왜냐면 실은 App.js에 짜고 있는건 html이 아니라 JSX라고 부르는 이상한 언어라..

왜 React를 사용할까? 리액트 문법부터 들이밀면 누구나 이해가 가지 않습니다. 리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데 어떤 웹사이트를 들어가서 이런저런 버튼을 눌렀을때 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 Single Page Application 이라고 하는데 - html 파일을 1개만 쓰고 - 다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여줍니다. 그래서 부드럽게 동작합니다. 바닐라JS로 도 만들 수는 있지만 코드가 너무 길어지는 관계로 리액트라는 자바스크립트 라이브러리를 설치해서 사용하면 이걸 더 쉽게 만들 수 있습니다. 그래서 리액트라는 라이브러리를 배우고 사용하는 것입니다. 리액트 쓰는 또 다른 이유들은 -..