리액트 기초 / 터미널 명령어

리액트는 사용자정의 태그를 만드는 본질이다.
(컴포넌트를 이야기하는것)

npx create-react-app 프로젝트이름 .

• 점 하나만 적을시 그폴더에 만듬.

---

npm run build

• 배포용 파일로 변환 시킨다.

---

npx serve -s build

• 배포용 파일 index 파일을 서브서버로 열기.

---

props 기초

const Header = (props) =>{
  return(
    <header>
        <h1><a href="/">{props.title}</a></h1>
      </header>
  )
  
  function App() {
  return (
    <div className="App">
      <Header title="REACT"/>
      <Nav/>
      <Article/>
    
     
    </div>
  );
}

---

데이터 가져다 쓰기 = topics

function App() {

  const topics = [
    {id:1, title:'html', body:'html is...'}
    {id:2, title:'css', body:'css is...'}
    {id:3, title:'js', body:'javascript is...'}
  ]

  return (
    <div className="App">
      <Header title="REACT"/>
      <Nav topics={topics}/>
      <Article title="Welcome" body="Hello, WEB"/>
      
    
     
    </div>
  );
}
  ]

데이터를 Nav 컴포넌트로 받은후에 사용하기 (맵함수사용)

const Nav = ({topics}) => {
    
  return(
    <nav>
    <ol>
      {topics.map(r => (<li key={r.id}><a href={'/read/'+r.id}>{r.title}</a></li>))}
    </ol>
</nav>
  )
}

---

이벤트 만들기 약간 복잡한버전. (Header)

function App() {

  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'js', body:'javascript is...'},
    {id:4, title:'harim', body:'프론트가즈아...'}
  ]

  return (
    <div className="App">
      <Header onChangeMode={()=>{
        alert("경고");
      }} title="REACT"/>
      <Nav topics={topics}/>
      <Article title="Welcome" body="Hello, WEB"/>
      
    
     
    </div>
  );
}

Header 컴포넌트

const Header = (props) =>{
  return(
    <header>
        <h1><a href="/" onClick={(e)=>{
          e.preventDefault()
          props.onChangeMode()
        }}>{props.title}</a></h1>
      </header>
  )
}

e.preventDefault() 페이지 리로드를 막는함수
props.onChangeMode() 데이터 불러오기
() 괄호를 붙이는 이유는 모드쪽에 함수를 만들어둬서 함수를 불러와야함.
()괄호의 의미는 함수를 실행하겠다는 의미.

---

Nav 이벤트 만들기 불러오는 아이디값 다르게하기

    <div className="App">
      <Header onChangeMode={()=>{
        alert("경고");
      }} title="REACT"/>

      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}/>
      <Article title="Welcome" body="Hello, WEB"/>
      
    
     
    </div>

Nva 의 onChangeMode 함수에 파라미터값을 준다.

const Nav = ({topics,onChangeMode}) => {
    
  return(
    <nav>
    <ol>
      {topics.map(r => (<li key={r.id}>
                  <a id={r.id} href={'/read/'+r.id} 
                  onClick={(e)=>{
                    e.preventDefault()
                    onChangeMode(e.target.id)}
                    }>{r.title}
                  </a>
          </li>))}
    </ol>
</nav>
  )
}

e.preventDefault() 로 리로드를 막고
a 태그에 id값을 넣어서 만들고.
onChangeMode 함수를 받아 사용하여.
괄호안에 클릭한 타겟의(e.target.id) 아이디값을 가져온다.
그러면 클릭하는 아이디의 따라 다르게 불려와진다.

생활코딩 리액트 2022 기초 입문 영상을 보고 제작하였습니다.

---

전체코드

import './App.css';

const Header = (props) =>{
  return(
    <header>
        <h1>
          <a href="/" onClick={(e)=>{
          e.preventDefault()
          props.onChangeMode()
        }}>{props.title}</a>
        </h1>
      </header>
  )
}

const Nav = ({topics,onChangeMode}) => {
    
  return(
    <nav>
    <ol>
      {topics.map(item => (<li key={item.id}>
                  <a id={item.id} href={'/read/'+item.id} 
                  onClick={(e)=>{
                    e.preventDefault()
                    onChangeMode(e.target.id)}
                    }>{item.title}
                  </a>
          </li>))}
    </ol>
</nav>
  )
}

const Article = (props) =>{
  return(
    <article>
    <h2>{props.title}</h2>
    {props.body}  
    </article>
  )
}


function App() {

  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'js', body:'javascript is...'},
    {id:4, title:'harim', body:'프론트가즈아...'}
  ]

  return (
    <div className="App">
      <Header onChangeMode={()=>{
        alert("경고");
      }} title="REACT"/>

      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}/>
      <Article title="Welcome" body="Hello, WEB"/>
      
    
     
    </div>
  );
}

export default App;