[React] 4. Components and Props


Javascript Function style component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
ES6 class style component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
render
ReactDOM.render(
  element,
  document.getElementById('root')
);
요렇게 하면 element를 root라는 element 하위로 render하겠다는 것이다.

 User-defined Component
React는 user-defined component를 사용하는 element를 만나면 해당 element의 attribute을 props에 넣어 user-defined component로 전달한다. 그리고 중요한 점은 component의 이름을 지을때 항상 대문자로 시작하도록 해야한다. 소문자로 시작하면 React는 해당 component를 DOM tag로 취급한다.


Components should not attempt to modify props!




댓글

댓글 쓰기

이 블로그의 인기 게시물

[Django 공식문서 번역] REST Framework - Viewset and Router

Viewset을 사용하면 관련된 view들을 하나의 클래스로 묶을 수 있다. class UserViewSet ( viewsets . ViewSet ): """ A simple ViewSet for listing or retrieving users. """ def list ( self , request ): queryset = User . objects . all () serializer = UserSerializer ( queryset , many = True ) return Response ( serializer . data ) def retrieve ( self , request , pk = None ): queryset = User . objects . all () user = get_object_or_404 ( queryset , pk = pk ) serializer = UserSerializer ( user ) return Response ( serializer . data ) from rest_framework import routers router = routers . SimpleRouter () router . register ( r 'users' , UserViewSet ) router . register ( r 'accounts' , AccountViewSet ) urlpatterns = router . urls 위의 예시는 아래의 URL 패턴을 만든다 URL pattern:  ^users/$  Name:  'user-list' URL pattern:  ^users/{pk}/$  Name:  'user-detail' URL
자세한 내용 보기

[Django REST Framework] create() vs perform_create()

Django REST Framework의 ModelViewSet과 create() 관련 찾아보고 공부한 내용을 정리해보려고 한다. 기본적으로 ModelViewSet은 GenericAPIView라는 클래스를 상속받기 때문에 .list(), .create()  .list(), .create() 등을 기본으로 내장하고 있다. 따라서 이 중에서 기본 내장되어 있는 메소드 중 동작을 변경하고 싶은 것들만 overriding해서 수정하면 된다. 그리고 ModelViewSet은 GenericAPIView를 상속받고 있기 때문에 최소한 queryset와 serializer_class는 세팅해주어야 한다. from rest_framework import status from rest_framework.response import Response def create(self, request, *args, **kwargs): serializer = self.get_serializer(data=request.data) serializer.is_valid(raise_exception=True) self.perform_create(serializer) headers = self.get_success_headers(serializer.data) return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers) def perform_create(self, serializer): serializer.save() 위의 코드를 보면 이해가 조금 더 쉬울 것 같다. perform_create()은 create()의 동작 중 일부분을 overriding한다고 생각하면 되는데, serializer.save()가 호출될 때 perform_create()가 호출된다고 생각하면 된다. 위의 경우 명시적으로 perform_create()를 호출했지만, d
자세한 내용 보기

Intel Open WebRTC Toolkit(OWT) Media server 설치하는법

Ubuntu 18을 기준으로 하고있습니다. 1.  https://software.intel.com/en-us/webrtc-sdk  에 들어가서 Download를 누르고 회원가입 후 다운로드를 받는다. - 만약 리모트 서버에 다운을 받고 싶다면 회원가입 후 다운로드 버튼 > 오른쪽 클릭 > 링크 복사로 다운로드 링크를 복사한 후, wget <링크> 2. 다운받은 zip파일을 풀어준다 unzip Intel_CS_WebRTC.v<version>.zip - 만약 unzip이 깔려있지 않다면 sudo apt-get install unzip 3. 압축을 푼 폴더 안으로 이동한 후 자신이 설치하고자 하는 패키지를 설치하면 되는데 이번에는 서버를 설치하려고 하기 때문에 tar xf CS_WebRTC_Conference_Server_MCU.v<version>.Ubuntu.tgz 4. 압축이 풀린 폴더안으로 이동 cd Release-v<version> 5. dependencies 설치하기 bin/init-all.sh --deps 6. 서버 시작하기 bin/start-all.sh - 만약 "node version not match. Please use node v8"과 같은 에러가 뜬다면 node의 버전을 8.15버전으로 바꿔줘야되는데 아마 기본적으로 nvm이 같이 깔렷을텐데: nvm ls 결과가 다음처럼 뜰 것이다: Release-v4.3# nvm ls         v8.15.0 ->       system node -> stable (-> v8.15.0) (default) stable -> 8.15 (-> v8.15.0) (default) 그러면: nvm use stable 하고 node 버전을 체크해보면 8.15가 뜬다 그리고 다시 bin/start-all.sh 하면! starting ma
자세한 내용 보기