리엑트 기초 JSX (State, map,props)

1) State 만드는법 

 

JS같은 경우는 let 변수명 = '저장 내용'같은 경우로 저장했엇는데 

리엑트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다. 

 

 

const [fruit, setFruit] = useState({ color : "red", name : "apple" })

우선  import {useState} from 'react' 를 하고 

useFruit(저장할 내용)을 쓰면 된다. 

 

word자리에 state 이름은 자유롭게 작명 하면된다. 

1. 새로운 객체를 만들어서 setFruit 하는 방법

setFruit({ color:"red", name:"strawberry" })

2. fruit state를 이용하여 name만 변경하는 방법

setFruit({ ...fruit, name:"strawberry" })

3. prevState를 이용하여 이전 state 값을 사용하여 setState를 하는 방법

setFruit(prev => ({ ...prev, name:"strawberry" }))

2. Map 쓰는법 

 

모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다.

자바스크립트 기본함수 같은건데 용도를 알아봅시다. 

 

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
});

기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.

저러면 진짜로 console.log(1) 3번 실행됨 

 

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
});

기능 2. 콜백함수에 파라미터 아무렇게나 작명하면

그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.

(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)

저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 

 

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray)

기능3. return 오른쪽에 뭐 적으면 array로 담아줍니다.

그리고 map() 쓴 자리에 남겨줍니다.

그래서 변수에 담아서 출력해봤더니 진짜로 array에 담아주긴 하는군요 

newArray는 [20, 30, 40] 이 출력됩니다. 

 

 

JSX안에서 반복문을 생성하고 싶으면

 

리엑트 중괄호안에서 html 반복생성하고 싶다면 map을 써도 된다. 

 

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}

 

map은 파라미터가 2개 까지 가능하다 

첫째 파라미터는 array안에 있던 자료

둘째 파라미터 i는 0부터 1씩 증가하는 정수를 나타냄

 

 

props 쓰는법

 

예를들어 모달을 띄우고 싶다면 

 

요론식으로 app안에 모달이 있다고 생각하자 컴포넌트를 먼저 만들어준다. 

 

자바의 상속같은 개념인데

 app -> modal쪽으로 스테이터스를 넘겨줄 수 있다. 

 

그방법은 다음과 같다. 

 

function app(){

	let [data, setData] = useState(0);
	
	<div>
    	<MODAL data={data }/>
    </div>
}

fucntion Modal(props){
	return(
    	<div>
        props.data
        </div>
    )
}

요론식으로 쓰면 data가 나온다.

 

부모 APP 

자식 Modal이다. 

 

자식 -> 부모 (x)

자식 -> 자식 (x)

 

안됨

 

https://moonseokhyun.github.io/

React App

 

다만 들었당 읭..