react 기초문법

기초문법<1> 여러가지들🍓

저번 글과 같이 계속해서 기초 문법을 알아보자.

기초 문법🚩

<button onClick={ ()=>{ modal===false ? modalModify(true) : modalModify(false) } }>눌러주세요</button> // !modal

    {
      modal === true ? <Model></Model> : null
    }

react에서는 {}을 사용하여 js문법을 사용하는데 아쉽게도 if는 기능지원을 하지않는다.

그래서 삼항연산자 ‘조건 ? true : false’를 사용한다.

‘modal===false ? modalModify(true) : modalModify(false)’ ➡️ modalModify(!modal) 이렇게 쉽게 바꿔줄 수 도있다.

{
    title.map( (a) => {
    	return (
            <div className="list">  //key={index}
            <h3> {a} </h3>
            <p> 2021-11-01 만듬 </p>
            <hr />
            </div>
   			 )
    } )
}

react에서의 반복문 {}안에 map을 사용하여 반복문을 작성한다. //key={index} 써줘도되고 안써줘도됨

//map( (item, index)=> { } )

새로운 함수를 만들어 for문을 사용하고 그걸 return 안으로 호출하는 방법도 있다.

 modal === true ? <Model title={title} clickNum={clickNum}></Model> : null
 //	부모 컴포넌트의 콜위치에 작명={state변수}

function Model(props) {
  return (
    <div className="mo">
      <h2>{props.title[props.clickNum]}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

// 함수에는 매개변수를 하나 써주면 되고 매개변수.state변수를 써주면 부모자식간에 변수를 활용가능

이렇게 부모 컴포넌트의 변수를 자식 컴포넌트가 사용할 수 있게 하는것을 ‘props’라고 한다.

‘onClick={ ()=>{ [modalModify(!modal), clickNumModify(index)] } }‘배열형식으로 쓸수있음.

<input className='search' onChange={ (e)=>{ inputValModify(e.target.value) } } />

e.target.value ➡️ input에서의 값을 가져온다는 뜻 매개변수도 써줘야함.

let a = [];

export default a; // a라는 변수를 쓸 수 있게해줌

src폴더에 새로운 파일을 만들어 다음과 같이 코딩을 함.

import item from "./data.js"; //import 작명 from 경로

let [a, aModify] = useState(item);

data.js라는 곳에서 a라는 변수를 item에 집어넣음 ➡️ 간단하게 다른곳에서의 변수를 사용가능