react - 기초(1)

김동하·2020년 10월 19일
0

react

목록 보기
1/31

필요성

복잡한 html을 사용자 정의 태그 즉, component를 만들어서 가독성, 재사용성이 높아진다.

개발 환성 세팅

npm / npx 로 create-react-app으로 실행한다.

npx create-react-app

그리고 폴더를 만들고 create-react-app . 을 입력한다.

터미널에 npm run start로 시작!

element

엘리먼트는 react app에서 가장 작은 단위

const element = <h1>Hello, world</h1>;

react 엘리먼트는 일반 객체이며 불변한다.

component

일반적으로 함수. 컴포넌트에서는 하나의 최상위 태그만 사용해야 한다. JSX로 코드 작성하면 된다.

state와 props

props

속성을 나타내는 데이터다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')

<Welcome name="Sara" />를 element로 ReactDOM.render()를 호출한다. -> react 는 {name: 'Sara'}를 props하여 Welcome 컴포넌트를 호출한다. -> Welcome 컴포넌트는 <h1>Hello, Sara</h1> 엘리먼트를 반환한다. Rract dom은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 업데이트한다.

state

컴포넌트 내부적으로 사용되는 것들이다. props와 state를 잘 분리해놔야 한다. (불확실) props들을 정리해서 모아둔 것? state의 프로퍼티로 props?

class Content extends Component{
    render(){
        return (
            <article>
            <h2>{this.props.title}</h2>
               {this.props.decs}
            </article>

        )
    }
}

class App extends Component {
    render() {
        return ( 
        <div className="App">
       
          <Subject></Subject>
          <TOC></TOC>
          <Content title="react" desc="cool"></Content>
       </div>
        )
    }
} 

props를 이용해 리팩토링했다.

constructor(prps){
   super(props);
   this.state= {
      content:{title:"react", desc:"cool"}
   }
}

이제 constructor함수를 class 가장 첫 번째로 넣는다. 컴퍼넌트가 실행될 때 컨스트럭터 함수로 state값을 초기화시킨다. 그리고 contetn의 값을 state화 시킬 것이기 때문에 프로퍼티 값으로 객체를 준다. state를 다른 컴포넌트의 prop의 값으로 줄 수 있다. 은닉이 가능하다.

state의 여러 개의 값을 다룰 때

  this.state= {
           content:{title:"react", desc:"cool"},
           contents:[
               {id:1, title:"html", desc:"html is..."},
               {id:2, title:"css", desc:"css is..."},
               {id:3, title:"js", desc:"js is..."}
           ]

state에 contets라는 프로퍼티를 만들고 객체들을 담은 배열을 할당했다. 저것을 <TOC></TOC>에 넣고 싶을 때

 render() {
        return ( 
        <div className="App">
          <Subject></Subject>
          <TOC data={this.state.contents}></TOC>
          <Content title="this.state.subject.title" desc="this.state.subject.desc"></Content>
       </div>
        )
    }
   let lists = []
   let data = this.props.data
   let i = 0; 
   while(i < data.length){
    lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
       i = i +1
   }

<TOC>에 새로운 속성을 주고 거기에 state의 contents 값을 할당한다. 이제 <TOC>에 가서 render 함수 안에서 while문으로 lists에 li태그를 푸시한다. 여기서 this.propsdata={this.state.contents}이거니까 data는 객체들이다.

이런 에러가 발생한다. 여러 개의 목록을 자동으로 생성할 때는 각 리스트의 항목은 key라는 props가 있어야 한다. li 에key={data[i].id} 속성으로 주면 된다.

3초 만에 배우는 리액트

위 html을 만들기 위해 react를 사용했다.

app 컴포넌트 안에 subject, toc, content 컴포넌트를 만든다. 각 html에 해당하는 부분을 쪼개서 하나의 컴포넌트에 넣은 것이다.

<Subject>에 해당하는 부분

<TOC>에 해당하는 부분

<Content>에 해당하는 부분

이것들을 app 컴포넌트에 차곡차곡 모아서 index.js로 보내버린다.

가상DOM이란 곳에서 app 컴포넌트를 렌더하는데 html파일의 entry가 되는 곳을 root란 id를 가진 태그에서 가져온다. root는

여기에 있다.

그렇다면 props는?

a 태그 안에 href는 attribute라고 불리며(속성) 태그의 이름은 공통점이지만 속성은 모두 다르다.

<a href="index.html"></a>

react는 attribute를 이용하여 html에 표시될 내용을 정의할 수 있다. 이를 props라고 한다.

이렇게 Subject에 속성으로 title과 sub을 주었다. 그리고 역으로 Subject 컴포넌트에 render 함수 안에 props를 줘서 render하게 해야 한다.

이렇게 {this.props.title}을 통해 App 함수 안에 있는 <Subject></Subject>의 props를 가져온다.

{this.prop}을 콘솔찍으면 <Subject></Subject>에 주었던 props가 나온다.

정적이었던 html에 활기를 준 것이다!

그렇다면 state는?

props에 따라 컴포넌트 내부에 구현에 필요한 데이터다. 라고 했지만 무슨 말인지 모르겠다. 살펴보자.

짜잔 첫 컴포넌트가 완성됐다. contructor로 state를 초기화하고 state에 객체를 할당 그리고 다시 subject라는 프로퍼티에 객체를 할당해서 subject 컴포넌트의 props 값을 주었다.

title에 원래 string이 할당되었는데(props) 이제 state가 할당되었다. Subject에 state를 props값으로 주었다. 즉 데이터를 가져오는 곳이 달라졌다.

state 값을 여러개 할 때

state안에 contents를 생성하고 안에 여러 개의 데이터를 주었다. 이것을 TOC란 컴포넌트 안에서 렌더할 것이기 때문에

props에 state의 contents를 준다.

TOC 컴포넌트로 가서 props를 가져온다. 그리고 while문 안에 <li></li>를 가져와서 lists에 push하는데 이 부분이 약간 헷갈리다. 일단 href에는 data의 id를 주고(/content/)는 무엇인지 모르겠다. 찾는중 각각의 title을 가져온다. 그리고 return에 {lists}로 lists의 값을 가져오면 된다.

여러 개를 렌더할 때 꼭 <li key={data[i].id}> key 값을 주어야 한다.

긴 3초가 다 지나갔다.

참고

https://www.inflearn.com/course/react-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9

https://ko.reactjs.org/docs/rendering-elements.html

profile
프론트엔드 개발

0개의 댓글