무작정 React 공부(1)

백엔드를 공부하기 위해 간단한 게시판을 만들어 보는 중이다.

그러나 프론트엔드 또한 같이 할 사람이 없어서 혼자 해보는중…. 그나마 React가 쉬워 보여서 이를 통해 하는 중이다.

shards-react design UI를 활용한 Template을 내 입맛에 맞게 수정하여 사용할 예정.

생각 보다 재밌고, 그러나 이끌어줄 사람이 없어서 많은 삽질중이다.

하나씩 하나씩 삽질하면서 배우게 된 것들을 까먹지 않도록 정리할 예정.

내가 이해한 바를 기준으로 정리할 예정이라 실제 사실과 다소 거리가 멀수도…

우선 React에서 보면, Component가 실제 화면을 구성하는 것.

Component에서 형식에 맞게 return을 해주면 해당 코드가 화면으로 출력이 된다.

이때 Component에서는 class형식 or function으로 존재하여 return 해준다.

class BlogPosts extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      p_num:1,
      paging:{},
      posts:[],
      image_url:'null'
    };
  }
}

위와 같은 경우는 class를 이용하여 구성한 component.

constructor를 통해 생성자를 형성한다.

state는 변수들을 선언하여 사용하는 곳. 동기화 같은 좀 더 기술이 있는 것 같은데 추후 공부할 예정.

이 때 super(props)를 보면, 이 props를 통해 해당 class를 호출한 상위 component에서 전달해준 function 또한 사용할 수 있다.

AddNewPost에서의 코드

<SidebarActions handler={this.createPostHandler}/>

const SidebarActions = (props) => (
  <Card small className="mb-3">
    <CardHeader className="border-bottom">
      <h6 className="m-0">카테고리</h6>
    </CardHeader>

    <CardBody className="p-0">
      <ListGroup flush>
        <ListGroupItem className="p-3">
        </ListGroupItem>
        <ListGroupItem className="d-flex px-3 border-0">
          <Button theme="accent" size="sm" className="ml-auto" onClick={props.handler}>
            <i className="material-icons">file_copy</i> Publish
          </Button>
        </ListGroupItem>
      </ListGroup>
    </CardBody>
  </Card>
);

처음의 AddnewPost에서 Sidebaraction을 사용한다. 이때 handler라는 변수(?)에 클래스의 binding된 function을 넣어준다.

이렇게 넣어준 function을 자식 Component에서 props.handler로 사용할 수 있다.

• fe
• react