본문 바로가기

코딩애플/코딩애플-React

(9)
[1]class를 이용한 옛날 옛적 React 문법 class를 이용한 옛날 옛적 React 문법 과거 component 현재 component 과거의 setState({이름:'내용'}) 현재의 setState function App() { let [title2, titleChange2] = useState(['남자 코드 추천', '강남 우동 맛집', '피곤하다 집가면 자야지']);//문자, 숫자, array, object 다 가능 function 제목바꾸기() { var newArray = title2; // 얕은 복사라 데이터가 안 변한다. var newArray = [...title2]; // 깊은 복사를 사용해라 newArray[0] = '여자코드 추천'; newArray.sort(); // 제목으로 정렬 titleChange2(newArray);..
[11] input input 다루기 1 : 사용자가 입력한 글을 변수에 저장하는 법 입력값 = e.target.value 는 안된다. 입력값변경(e.target.value) 를 사용해라 input 다루기 2 : 블로그 글발행 기능 만들기 매개변수 없이 onclick 함수하기 /* eslint-disable */ import React, { useState } from 'react'; // import logo from './logo.svg'; import './App.css'; //리액트의 장점: 데이터 바인딩 쉽게 해준다. function App() { let posts = '강남 고기 맛집'; function workSearch() { return 100 } let styleRecord = { color: 'blue'..
[10] props2 (UI 제작 패턴) props를 응용한 상세페이지 만들기 1) 제목을 누를 때 각각 다른 모달창이 뜨도록 맨 아래에서 하겠음. 2) 버튼을 누를 때 각각 다른 모달창이 뜨도록 누른제목으로 숫자값을 구해볼까 1) 제목을 누를 때 각각 다른 모달창이 뜨도록 적용해볼까? /* eslint-disable */ import React, { useState } from 'react'; // import logo from './logo.svg'; import './App.css'; //리액트의 장점: 데이터 바인딩 쉽게 해준다. function App() { let posts = '강남 고기 맛집'; function workSearch() { return 100 } let styleRecord = { color: '..
[9] prop [9] props : 자식이 부모의 state를 가져다쓰고 싶을 땐 말하고 쓰셔야합니다 let [누른제목, 누른제목변경] = useState(0); {modal === true ? : null} function Modal(props) { return ( {props.title2[props.누른제목]} 날짜 ) }
[8] map map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 중괄호에는 변수명, 함수명만 넣을 수 있지 for문 못 넣음 중괄호에 반복문을 쓰고 싶으면 map()이라는 함수를 쓰면 된다. 반복문 쓰는 법 map함수? array에 붙일 수 있는 함수 array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을때 .map() 따봉이 각각 숫자가 올라가게 해줘
[7] Modal UI, if문 [7] 클릭하면 동작하는 UI (모달창) 만드는 법 클릭하면 가 등장하도록 하려면 어떻게 해야하는가? 쌩 자바스크립트 리액트 style="display : none" style="display : block" if 대신 삼항 연산자 리액트에서는 UI를 만들 때 state 데이터를 이용합니다. 사이트 첫 로드 시 : 모달창은 fasle로 안보임 modal 상태가 true가 되면 컴포넌트로 html을 보이게 하라. 을 누르면 모달창을 보이게 만들어라 오늘의 숙제 : 버튼 눌렀을 때 열리고 한번 더 누르면 닫히는 모달창 만들어봐라 나는 이렇게 함 { modal변경 (modal===true ? false : true ) } }> { title2[3] } /* eslint-disable */ import Reac..
[6] Component 6강 React Component : 많은 div들을 한 단어로 줄이고 싶은 충동이 들 때 모달 만들기 html을 축약하기 return() 안에 html을 작성하고 있다. 불가능 가능 return ( Component 유의사항 1. 이름은 대문자 2. return ( ) 안에는 하나의 div 로 묶어야 한다. 어떤걸 Component로 만드는게 좋을까? 반복 출현 하는 Html 덩어리들 자주 변경되는 Html UI들 다른 페이지 만들 때도 컴포넌트로 만듦 Component 단점 state 쓸때 복잡해짐 상위 컴포넌트에서 만든 state를 사용하려면 props문법을 사용해야한다.
[5] state 변경, onClick={함수} 5강 버튼에 기능개발을 해보자 & 리액트 state변경하는 법 데이터 올리는 방법 3가지 3가지 방식이 있다. function App() { let posts = '강남 고기 맛집'; return ( {posts} 2월 17일 발행 ); } let [title, titleChange] = useState('데브워니'); //문자, 숫자, array, object 다 가능 console.log('title>>> ', title); //state 데이터 console.log('titleChange>>>> ', titleChange); //state 데이터 변경 함수 {title} 2월 17일 발행 let [title2, titleChange2] = useState(['남자 코드 추천', '강남 우동 맛집',..