React

App.js

//export default App; 를 넣거나

export default function App(){ 를 쓰기

 

import  "./App.css";

function MyButton(){
 //js코드 ==vue script 부분
 //컴포넌트의 이름은 항상 대문자로 시작
  return <button>I'm a button</button>
  //return vue== template 부분
}
//arrow 함수
const MyButton2 = (props)=> {
  return <button>I'm a button2</button>
};
export default function App(){
  return(
    <>
      <h1>Welcome to my app</h1>
      <MyButton></MyButton>
      <MyButton2></MyButton2>
    </>
  );
}
//export default App;

 

 

Button.js

function MyButton (){
    return <button>button1</button>
};
function MyButton2 (){
    return <button>button2</button>
};
export {MyButton, MyButton2};

import "./App.css";

function App1(){
  //1.일반 jsx 요소 반환
  return (<p>Helllo</p>) 
}
function App2()
{
  //2. 일반 컴포넌트 요소 반환
  return <App1></App1>
}
function App3(){
  //3. 일반문자열 반환
  return "Hello World";
}
function App4(){
  //4.배열
  return ["A","B"];
}
function App5(){
  //5.JSON 사용 불가 이유는 jsx 의 기본 문법 {} 때문이가
  //문자열 형태의 json포맷으로 리턴해야 한다.
  return "{a:100,b:200}";
}
function App6() {
  // 6. 여러개 반환시 반드시 root 태그 필요
  return (
    <>
      <p>Hello</p>
      <p>Hello2</p>
    </>
  );
}
function App(){
  //7. null , false, true 값 이용한 조건후 랜더링 반환
  //{null}{false}{true} 반환가능, 하지만 아무것도 랜더링안됨
  //변수&&App1 => 변수값이 false |null 이면 랜더링안됨
  //                      true 면 <App1/>반환
  // ex) <div>
  //  {count.value>0 && <Title/>} ==> count.value>)을 만족해야 <Title/>이 랜더링 됨
  //</div>
  return(
  <div>
<p>Hello6</p>
0:{null}
{false}
{true}
<br></br>
1:{null && <App1></App1>}
<br/>
2: {true && <App1/>}
<br/>
3: {false && <App1/>}
<br/>
  </div>
  )
}
export default App;

컴포넌트작성

 

function Contact(){
    return (
        <ul>
            <li>홍길동</li>
            <li>이순신</li>
            <li>유관순</li>
        </ul>
    )
}
export default Contact;

 

 

import Contact from "./Contact.js";

function ContactList(){
    return(
        <>
        <h1>Contacts 홈페이지</h1>
        <Contact/>
        </>
    );
}
export default ContactList;

 

 

import ContactList from "./components/ContactList";
function App(){
  return(
    <div>
<ContactList/>
    </div>
  )
}
export default App;

 

 

JSX

 

배열 객체분해할당 ( destructuring )

객체분해할당은 객체의 구조를 해체하는 것을 의미한다. 배열이나 객체의 데이터를 해체하여 다른 변수로 추출할 수 있다. 이러한 이유 때문에 ‘분할 할당’이라고도 한다.

가. 배열 객체분해 할당

양쪽 모두 배열형식으로 지정해야 되고 인덱스를 기준으로 값을 할당한다.

 

나. object 객체분해 할당

Key값을 기준으로 값을 할당한다. 미리 선언된 변수를 사용하기 위해서는 반드시 () 안에 코드를 작성해야 된다.

 

다. 파라미터 객체분해 할당

호출 받는 함수의 파라미터를 객체 분해 할당 형태로 작성하면 함수에서 분해된 값을 사용할 수 있다.

 

import "./App.css";

let title ="Menu";
let names =["홍길동","이순신","강감찬"];
let attr = {href:"http://www.google.com", target:"_blank"};

function App1(props){
  console.log("App1",props);
  return(<a>App1입니다</a>)
}//
function App(){
  return(
    <div>
<h2>jsx 사용1-기본</h2>
숫자는 중괄호로 지정 : {100+1}
<br/>
불린값(true, false, null) 은 직접 출력 안됨 :{3>2}
<br/>
불린값을 이용한 문자열 출력 : {3>2 ? "true": "false"}
<br/>
3항 연산자: {1? "A1":"B1"}
<br/>
<h2>jsx사용2 - 배열, 반복, 이벤트, 조건부 랜더링</h2>
문자열 변수:{title}
<br/>
배열:{names}, 원소: {names[0]}
<br/>
배열2:{" "}
{[<p key={Math.random()}>Hello</p>, <p key={Math.random()}>World</p>]}
 <br/>
 JSON: {"사용불가"}<br/>
 링크: <a {...attr}>구글</a><br/>
 반복:
 {names.map((row, idx)=> {
  return <span key={Math.random()}>{row}</span>;
 })}
 <br/>
 이벤트 :
 <button onClick={()=> console.log("OK")}>OK</button>
<p style={{fontSize:"40px", backgroundColor:"red"}}>스타일</p>
<br/>
조건부 랜더링:
{title == "Menu" &&<App1/>}
<p style={{fontSize:"40px", backgroundColor:title=="Menu"?"yellow":"red"}}>스타일2</p>
    </div>
  )
}
export default App;