반응형 React44 React props 추가 - 변경 자주하는 내역들 props로 전달하기 컴포넌트안에 props두개 전달 당연히 가능 { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } - map함수 사용하면 첫번째 매개변수말고 index도 가지고 있다. { 글제목.map(function(글, i){ return( {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/} { 누른제목변경(i)}} > {글} {따봉바꾸기(i)}}>🥰좋아요! {따봉[i]} {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */} 1월 10일 발행 ) }) } - props한 외부 컴포넌트 문법에서 사용하기 function Modal(prop.. 2022. 1. 10. React props props로 자식에게 state전해주기 1. -> 보통 똑같이한다. 2.자식컴포넌트에서 props 파라미터 입력 후 사용 주요코드 function App() { ... let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) ... { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } ... } function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다. return( 제목 {props.글제목[0]} 날짜 상세내용 ) } 전체코드 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import {useState}.. 2022. 1. 9. React map,반복문 반복문 쓰는 법 for랑 map2가지가있다. 1.for function으로 만들어주고 아래에서 { 함수명() } 으로 불러와준다. // for반복문을 쓰고싶다면? // 함수안에서 사용하고 어레이에 HTML추가 // array를 마지막에 return으로 뱉어냄 function 반복된UI(){ var 어레이 = []; for (var i=0;i🥰좋아요! {따봉} 2월 17일 발행 ) // return }) } 결론적으로 좀 기괴한 모양이 나왔는데, 좋아요 역시도 같은 갯수만큼 useState로 만들어줘서 별도로 작동하게 만들어줘야한다. 해당부분 추후 구현해보도록하자. let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) let [따봉,따봉변경] = useState(0) .. 2022. 1. 9. React Component 문법 div로 가득한걸 쉽게 볼 수있게 만들어 주는녀석이라고 알아보자 나만의 단어로 '치환'해서 만들 수 있음 -Component 만드는법 1.함수 만들고 이름짓고 2.축양을 원하는곳에html넣고 3.원하는곳에 4.이름은 대괄호 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import {useState} from 'react' function App() { let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) let [따봉,따봉변경] = useState(0) let posts = "군자 훠궈 맛집" function 제목바꾸기(){ var newArray = [...글제목] newArray[.. 2022. 1. 9. React state 변경하는법 ps. 터미널에 뜨는 warning은 에러는 아님 그냥 eslint라고...함 /* eslint-disable */ 이거하나 넣어주면 오류 안남 -좋아요 버튼을 만들어보자 원래 이벤트 리스너 사용했어야했는데 간단하게 써보자! {/* { 글제목[0] } {console.log(1)}} >🥰좋아요! 0 */} { 글제목[0] } {따봉변경(따봉+1)} } >🥰좋아요! {따봉} 당연히 카멜 케이스 사용해야하고 규칙은 단순하다 onClick, 클릭하면 뒤에 {} 안에 함수형태로 넣어주면되는것! 애로우 펑션말고 함수를 따로만들어서 함수 이름을 넣어줘도됨 function 함수이름() { } 대신 onClick = { 함수이름} 이런식으로 해줘야함 -최종 버튼 하나누르면 서울을 뉴욕으로 바뀌게 만들어보자 /* esl.. 2022. 1. 9. React State 데이터는 1.변수에넣거나 2.state에 넣거나 state에 넣으려면 import먼저 해온다. import {useState} from 'react' import logo from './logo.svg'; import './App.css'; import {useState} from 'react' function App() { //let [a,b] = useState('남자 코트 추천') let [글제목, 글제목변경] = useState('남자 코트 추천') // [a,b] 형태의 array가 남는다. a에는 남자 코트 추천이 들어감 // b에는 그 데이터를 수정하기위한 함수를 생성해줌, 그냥 사용법임 // ES6 destructuring 문법임 var [a,b] = [10,100] 하면 각각 a,b에 들.. 2022. 1. 9. 이전 1 ··· 4 5 6 7 8 다음 반응형
