기록

동적인 UI 만드는 3step 1. html css 미리 디자인 해놓고 2. 현재 UI 상태를 state로 만들어두고 3. state의 종류에 따라서 UI가 어떻게 보일지 작성 그러면 나중에 필요할때 state만 조작하면 됨. * state를 자식컴포넌트에 만들어버리면 props 전송안해도 되지 않은가? - state는 부모에서 자식에게만 전송이 가능하기 때문에 다양한 컴포넌트에 쓰이는 state는 컴포넌트들 중 최고로 높은 부모에게 만들어 놔야함. 출처: 코딩애플 https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부..

자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없음. 근데 컴포넌트 2개가 부모/자식 관계인 경우에는 가능. (다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 함.) 부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있기 때문에 자식도 state 사용가능. 전송시에는 props라는 문법을 사용. props로 부모 -> 자식 state 전송하는 법 2 step 1. 자식컴포넌트 사용하는 곳에서 2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용 function App (){ let [title, setTitle] = useState(["오늘의 일기", "브랜드 추천", "맛집 추천"]); return ( // 작명은 관습적..

많은 div들을 한 단어로 줄이고 싶을 때 Component 사용 * html 코드 짤 때 유의점: return ( ) 안에 두개의 html 태그 병렬로 나란히 적는거 안됨. return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함. // 굳이 두개를 나란히 적고 싶으면 하나의 div로 감싸거나 return ( ) // 의미없는 div를 쓰기 싫은 경우, 로 감싸기(fragment 문법). return ( ) 복잡한 html 을 한 단어로 치환할 수 있는 Component 문법 function App(){ return( ) } function Modal(){ // 원하는 긴 html을 Modal 한 단어로 축약 return( ) } 1. function 을 이용해서 함수를 만들고 작명(..

제목 수정 버튼 만들기 let [title, titleChange] = useState([ "오늘의 일기", "브랜드 추천", "맛집 추천", ]); return( { let copy = title; // 배열 복사해서 사용 copy[0] = "데이트 코스 추천"; // 배열의 0번 자료 변경 titleChange(copy); // state에 변경된 배열을 기존 state 집어 넣기 }} > 제목 수정 ) 으로 작성하면 될 줄 알았으나, 작동하지 않음. State 변경함수 동작원리 state 변경함수를 쓸 때 기존state === 신규state 인지 먼저 검사해보기. 같으면 state를 변경해주지 않는다. 그래서 위 코드도 titleChange(copy)해도 copy라는 변수가 기존 state와 같아서..

더보기 터미널 / 브라우저 콘솔창에 warning 뜨는 이유 빨간 error는 해결해야하지만 warning은 무시해도 됨. 대부분 eslint 라는 기능이 잘못된 코딩관습을 교정해주는 건데 초보때는 warning 수정도다 코드 짜보고 실행하는게 중요해서 /*eslint-disable*/ 라는 주석을 js 파일 최상단에 추가해서 eslint 기능을 잠시 꺼두기. 버튼 기능 개발 하트버튼을 누르면 하트가 하나씩 추가 되도록 하는 기능 일단 html 레이아웃을 작성하고, {title[1]} ❤️ 여기서 변경 되는 부분인 ❤️ state로 저장해서 데이터바인딩하기 let [heart, heartChange] = useState("❤️"); {title[1]} {heart} 클릭시 무언가 실행하고 싶으면 onCl..

state 만드는 방법 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있음. useState를 작성하면 코드 상단에 import { useState } from "react"; 하고 들어옴. (자동 생성 안되면 상단에 import { useState } from "react"; 직접 입력하기) 원하는 곳에 useState('보관할 자료') 작성하면 state에 자료를 잠깐 저장할 수 있음. 저장한 자료를 쓰고 싶을 때에는 let [ a, b ] = useState('저장된 자료'); 이렇게 쓰면 a 자리에 state 이름을 자유롭게 작명해서 사용하면 됨. 더보기 [ a, b ] 무슨 문법인가?? 자바스크립트 destructuring 문법으로, array 안에 있는 데이터들을 변수로 쉽..

리액트는 기존 html, css 사용할 때 처럼 웹페이지 만들어 나가면 됨. 그런데 이제 html 대신 JSX를 곁들인. 리액트 프로젝트의 App.js App.js 가 프로젝트의 메인페이지! 미리 채워져있던 쓰데없는 html 내용은 싹 비우고 시작. 하나만 남기면 됨. 블로그 상단 nav 제작해보기 그냥 html 짜듯이 박스가 필요하면 만들고, 제목이 필요하면 만들고 똑같음. CSS 스타일은 App.css 파일에 작성하면 됨. JSX 문법 1. html 에 class 넣을 땐 className html 과 달리 class 명을 넣을 때 className이라고 작성해야 함. (JSX는 일종의 자바스크립트인데, class라는 키워드는 이미 자바스크립트에서 사용하는 예약어이기 때문이다.) (사용하고 싶은 cs..

리액트 React 설치와 개발환경 셋팅 (2022 ver) 개발환경 셋팅 1. 구글에서 Node.js 검색해서 LTS 버전 설치 2. Visual Studio Code 에디터 설치 리액트 프로젝트 생성 1. 작업용 폴더 하나 생성(제목은 프로젝트에 맞게 수정) 2. 폴더에 shift + 우클릭해서 PowerShell 창 열기 선택 (맥북 사용자는 손가락 두개 클릭해서 터미널열기 선택) 3. 터미널이 나오면 프로젝트명으로 프로젝트 생성하기(제목은 프로젝트에 맞게 수정) npx create-react-app 프로젝트명 위에 코드대로 입력하고 생성하는 중 에러가 발생하는 경우 해결방법: 더보기 1. 'npx command not found ~ '의 경우: - 터미널 껐다가 다시 시작해보기 - node.js 버..