생활코딩 WEB2 -JavaScript/React (23.04.14)

수업소개✅

React 사용자 정의 태그를 만드는 기술

부품으로 사용 (공유되고 사용할 수 있음)

 

실습환경 구축 ✅

React 홈페이지

온라인 플레이 그라운드 -> 개발환경 세팅 없이 바로 가능

Create react app 을 사용 !!
터미널에 npx create-react-app my-app

node js 다운로드 해야함 

vscode 로 실습

 

react1.app 폴더 생성 

새 터미널 열고 npx (node.js 다운받으면 사용가능)

 create-react-app 치면 바로 사용 가능

. (현재 디렉토리) + 엔터 클릭

다운로드!

 

npm start > 샘플 애플리케이션이 켜진다.

 

 

소스코드 수정 방법✅

 

index.js  // 입구파일

<app /> 태그 // UI 전체 , 실제 내용은 상단 import  App from './App' ; 에서 온다.

'root' // index.html 에 root 라는 id 가진 태그가 있다!

 

<배포>

터미널 > npm run build 

serve -s build  (idex.html 파일을 서비스해준다.)

npx serve -s build 

 

컴포넌트 만들기 ✅

 

컴포넌트 = 태그가 복잡한 경우, 태그를 (사용자정의태그) 이름을 맞춰서 만들고 싶음.

 

1. 함수를 만든다.  (대문자! 주의)

function Header(){
return <header>
</header>
}

<Header> </Header>

 

 

props ✅

 

속성 , 입력값

컴포넌트도 속성을 가지면 어떨까 = props

 

 

1. 매개변수로 props 를 준다.

2. 컴포넌트에 있던 값을 컴포넌트 함수 자체에 값 넣기 {props.title} 넣으면 값을 사용 가능

 

1. const topics 라는 변수를 생성  (객체 배열에 담기) 

2. {topics} 받아오기

3. 매개변수에 props 선언

4. const lis = {} 배열만들기

5. 동적으로 topics 값을 담아서 {lis}배열에 담아주기

6. for 문으로 동적태그 만들어주기

7. 키값 넣어주기 (태그 추적, 정확한 동작 도움?)

 

function Header(props){
  console.log('props',props); // title : "REACT"
  // props.title
return <header>
  <h1><a href="/">{props.title}</a></h1>
</header>

<Header title="REACT"> </Header>

function Nav(props){

const lis ={
  <li> <a href="/read/1">html</a></li>,
  <li> <a href="/read/2">css</a></li>,
  <li> <a href="/read/3">js</a></li>

}

for (let i=0; i<props.topics.length; i++){
  let t = props.topics[i];
  lis.push(<li key=(t.id)><a href="{'/read/'+t.id}">{t.title}</a></li>)
}

  return <nav>
    <ol>
      {lis} 
    </ol>
  </nav>
}


function 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:'Js is...'},
  }// 

  return{
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="welcome" body="hello, Web"></Article>
    </div>
  }
}

 

 

이벤트✅

컴포넌트에 이벤트  넣기

<Header onChangeMode={function(){
alert('Header');
}} </Header>

state✅

 

Prop -> state(컴포넌트 내부자를 위한) -> returun

 

[예제] 변수 값에 따른 본문 변화

 

 

생성 기능 구현✅

 

create read update delete

create !

[예제] 폼과 글 생성

 

 

 

 

수정 기능 구현✅

 

 

삭제 기능 구현 & 수업을 마치며✅