반응형

html 태그로 표현되어있는 문법을 createElement 로 변환해준다.

const vdom = <p>
  <h1>헤더</h1>
  <ul>
    <li style="color:red">첫번째</li>
    <li style="color:blue">두번째</li>
  </ul>
</p>

위에 있는 코드가 아래와 같이 변환이 된다.

"use strict";

const vdom = /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("h1", null, "\uD5E4\uB354"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
  style: "color:red"
}, "\uCCAB\uBC88\uC9F8"), /*#__PURE__*/React.createElement("li", {
  style: "color:blue"
}, "\uB450\uBC88\uC9F8")));

출처 : https://babeljs.io/ 에서 변환함.

왜 저렇게 변환이 필요한가?? 

// app.js
const vdom = createElement(
  "p",
  {},
  createElement("h1", {}, "헤더"),
  createElement(
    "ul",
    {},
    createElement("li", { style: "color:red" }, "첫번째"),
    createElement("li", { style: "color:blue" }, "두번째")    
  )
);

// react.js
export function createElement(tag, props, ...children) {
  props = props || {}
  return {
    tag,
    props,
    children,
  };
}

JSX 를 사용하지 않으면 위와같이 코드를 작성해줘야 한다. 하지만 위보다는 html 태그 구조가 눈에 더 잘 들어온다.

한가지 더 기본적으로 JSX 가 변환을 할때에 메소드를 보면 React.createElement를 사용한다. 하지만 위에 작성된 코드에서는 createElement를 사용하고 있다. 이걸 변경해주려면 다음과 같이 표시해 주면된다. 변환된 코드는 아래와 같다.

/* @jsx createElement */
// app.js
const vdom = createElement(
  "p",
  {},
  createElement("h1", {}, "헤더"),
  createElement(
    "ul",
    {},
    createElement("li", { style: "color:red" }, "첫번째"),
    createElement("li", { style: "color:blue" }, "두번째")    
  )
);

실제로 babel 사이트에서 변환된 것을 봐도 변경된 것을 알수 있다.

"use strict";

// app.js
const vdom = createElement("p", {}, createElement("h1", {}, "헤더"), createElement("ul", {}, createElement("li", {
  style: "color:red"
}, "첫번째"), createElement("li", {
  style: "color:blue"
}, "두번째")));

 

728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[typescriipt] Union , Narrowing  (0) 2023.02.15
[javascript] webpack.config.js 설정  (0) 2023.01.13
[javascript] 배열 연산의 형태  (0) 2022.12.23
[Javascript] 함수 형태  (0) 2022.12.20
[React] Warning: Each child in a list should have a unique "key" prop.  (0) 2022.08.12
반응형

React 에서 Key 가 필요한 이유

  • Map 사용시 고유한 Key 가 필요하다.
  • React 는 상태를 메모리에 저장하고 있다가 변경된 부분만 렌더링 한다.
  • Key 값이 없으면 모든 데이터를 비교해야 하지만 Key 가 있으면 Key만 비교하면 된다.
  • <ul>
  {props.users.map((user) => (
    <li key={user.id}>
      {user.username} ({user.age} years old)
    </li>
  ))}
</ul>

Map 에서 index 를 Key로 하면 안되는 이유

  • 0번의 index 가 삭제되면 React 가 변경을 감지하여 리렌더링 되고 0번 부터 다시 매핑한다.
  • 1번 인덱스가 0번으로 매핑이 된다.
  • 결론적으로 인덱스가 추가되거나 삭제되면 값이 바뀌기 때문에 index 를 key 로 사용하는것은 안좋다.
728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[javascript] 배열 연산의 형태  (0) 2022.12.23
[Javascript] 함수 형태  (0) 2022.12.20
[React] React.useState()  (0) 2022.08.12
[React] edX - Introduction to ReactJS Module2 내용정리  (0) 2018.05.30
edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
반응형
  • 값과 함수를 반환한다.
  • 함수는 값을 변화시킨후 컴포넌트를 리렌더링한다
  • 여러개의 state 를 정의할 수도 있고 object로 관리할수도 있다. 
    const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState(0);
const [enteredDate, setEnteredDate] = useState();
    const [userInput, setUserInput] = useState({
  enteredTitle: '',
  enteredAmount: 0,
  enteredDate: ''
})
    • 주의 할 점은 update 시 object에 있는 일부 키만 업데이트 한다면 다른 키들이 사라진다.
    • 아래와 같이 enteredTitle 키만 정의할 경우 나머지 키는 사라진다. (merge 하지 않는다) 
      const titleChangeHandlerNew = (event) => {
  setUserInput.enteredTitle = event.target.value
};
    • 수동으로 복사가 필요하다. 기본값을 복사한후 오버라이드 한다. 
      const titleChangeHandlerNew = (event) => {
  ...userInput,
  setUserInput.enteredTitle = event.target.value
};
      • 위 방법에서는 문제가 발생할 수 있다.
      • 리액트가 상태업데이트 바로 실행하지 않는다.
      • 따라서 동시에 많은 상태를 업데이트 할 경우 최신값을 잘못 가져올수 있다.
      • 따라서 다음과 같이 사용하는게 더 낫다. (스냅샷을 이용한다) 
        const titleChangeHandlerNew2 = (event) => {
setUserInput((prevState) => {
  return {
    ...prevState,
    enteredTitle: event.target.value
  }
});
};
  • useState 를 사용해서 set을 했는데 화면에서 안바뀔 경우
    • 사실 변경이 안된것이 아니라 화면만 전환이 안된것이다. (input 같은 경우)
    • 이럴때에는 value 에 입력 값을 바인딩 해준다.
728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[Javascript] 함수 형태  (0) 2022.12.20
[React] Warning: Each child in a list should have a unique "key" prop.  (0) 2022.08.12
[React] edX - Introduction to ReactJS Module2 내용정리  (0) 2018.05.30
edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
반응형

이제 곧 2018년이 저물고 2019년이 시작된다.

올 한해동안 내가 무엇을 했는지 한번 돌이켜 보고 정리를 하려고 한다. 막연하게 정리하기는 힘드니 생각나는 키워드대로 한번 적어본다.


1. Google Cloud Study Jam


2018/05/15 - [Development/Tech&Seminar] - Google Cloud Study Jams 후기

2018/10/08 - [Development/Tech&Seminar] - Google Cloud Hackathon 간단한 후기

2018/10/26 - [Development/Tech&Seminar] - Google Cloud Summit 2018 후기


나름 새롭게 뭔가를 해보기 위해 다짐하면서 시작했던 Google Study Jam. 막연하게 AWS 도 써봤으니 GCP 도 써봐야겠다는 생각을 실천으로 옮겨준 계기가 되었다. 지금도 공부를 하고 있고 많은 기능들을 사용해보지는 못했지만 조금씩 활용 범위를 넓혀 가보려고 한다. 이제 겨우 GKE 만 조금 사용해본 상태여서 갈길이 멀다. 


2. Kubernetes


Container 에 대한 관심도 있었고 회사에서 하는 업무와도 조금 연관성이 있어서 관심있게 봤다. 실제 어플리케이션을 이미지화 해서 돌려보기도 했다. 아쉽게도 내가 계획했었던 배포 관련 테스트는 해보지 못했다. 카나리나, 블루그린 배포 를 직접 해보려고 했었는데 게으른 탓에 해보지는 못했다. 아직 내가 메모해놓은 액션아이템에는 남아있으니 꼭 빠른 시간내에 해봐야겠다. 내가 사용해본 Kubernetes 의 기능들은 극히 일부에 불과 하니 앞으로도 계속해서 공부해야겠다.


3. React


이건 좀 아쉬움이 남는 부분이다. 올 초에 공부를 하려고 동기들하고 시작을 했는데 처음에는 제법 잘 해나가다가 중간에 바쁜 일정과 이런 저런 일들이 겹쳐서 좀 흐지부지 됐다. 그리고 하면서 느꼈는데 내가 프론트엔드 쪽에는 좀처럼 흥미를 못붙이는것 같다. 그러다 보니 더 어렵게 느껴지고 쉽게 지친다. 그래서 이런 점은 좀 심각하게 고민을 해봐야겠다. 아예 좀 포기 할것인지..-_-;;;


4. 도서 리뷰 & 베타리딩


2018/02/05 - [Enjoy Life/책을 읽자!!] - [나는 리뷰어다]Hello Coding 파이썬

2018/04/07 - [Enjoy Life/책을 읽자!!] - [나는 리뷰어다] 아주 큰 스케치북 그림그리기 & 색칠하기!!

2018/04/19 - [Enjoy Life/책을 읽자!!] - [길벗 개발자 리뷰어] Node.js 마이크로 서비스 코딩 공작소

2018/05/24 - [Enjoy Life/책을 읽자!!] - [나는 리뷰어다] 으로 Vue.js 의 첫걸음을 시작하자.

2018/07/15 - [Enjoy Life/책을 읽자!!] - [나는 리뷰어다] 자바 개발자라면 한번 쯤 읽어보자.!Think Data Structures (자바로 배우는 핵심 자료구조와 알고리즘)

2018/08/29 - [Enjoy Life/책을 읽자!!] - [길벗 개발자 리뷰어] 수학과 알고리즘의 조화!!! 알고리즘산책: 수학에서 제네릭 프로그래밍까지

2018/08/29 - [Enjoy Life/책을 읽자!!] - [나는 리뷰어다] <처음 배우는 암호화> 로 암호화 이론을 공부해보자~

2018/10/14 - [Enjoy Life/책을 읽자!!] - [나는 리뷰어다] 스프링 5 레시피를 살펴보자!



올 한해 출판사에서 진행하는 리뷰어에 선정되어 8권의 책에 대해서 리뷰를 썼다. 


상세보기


상세보기


그리고 블로그에는 남기지 않았지만 2권에 책의 베타리딩에 참여했다. 책들을 보면 기술서적, 알고리즘 또는 수학 관련 서적, 아이들 서적으로 나눠진다. 아무래도 리뷰어 신청할때 책 선택의 비중은 기술서적이 많다. 하지만 가끔은 지후와 함께 볼수 있는 책을 선택하거나 컴퓨터와 관련이 없는 책들도 선택을 하기도 했다. (물론 책은 랜덤으로 오지만..) 저 책들에 대해서 모든 내용을 다 소화하지는 못했다. 책 한권에 대해서 보통 2주정도 시간이 주어지는데 일반 소설과는 달리 기술서적은 직접 해보면서 읽어봐야 이해가 되기 때문에 시간이 좀 부족했다. 그런 점들이 좀 아쉬움으로 남는다. 


5. 세미나 참석

2018/10/26 - [Development/Tech&Seminar] - Google Cloud Summit 2018 후기

2018/11/08 - [Development/Tech&Seminar] - SpringOne Tour 참석 후기

2018/11/25 - [Development/Tech&Seminar] - Agile Korea Conference 2018 참석 후기


전에는 세미나를 참석하고 나서 뭔가 기록으로 남기질 않았다. 그렇게 하다보니 세미나를 참석하긴 했는데 뭘 보고 왔는지 기억이 나질 않았다. 이러면 안되겠다 싶어서 올해에는 참석한 세미나에서 세션을 들으면서 중간중간 메모를 하고 돌아와서는 글로 남겼다. 이렇게 하니 세미나에 대한 내용들도 다시 기억이 나고 뭘 해봐야 하는지 구체적으로 계획을 세울수 있었다. 그리고 내가 보고 듣고 한 내용들을 회사에서 같은 유닛원들에게 짧게 나마 공유를 했다. 공유를 해서 좋았던 점은 내가 보고 들은 내용을 다른 사람들에게 전달 하기 위해서 한번 더 찾아보고 정리를 할수 있었고 그래서 더 오랫동안 기억에남을 수 있었다. 


6. Authorization, Authentication, Oauth, OIDC, 그리고 오픈소스.


한해동안 회사 업무의 대부분을 차지한 키워드이다. 오픈소스는 정말 대단하지만 사용하기도 만만치 않다는 것을 깨달았다. 오픈소스를 컨설팅 하는 회사가 왜 생겨나는지 깨닫게 된 계기가 되었다. 빠른 버전업, 그리고 생각보다 부실한 메뉴얼, Usecase는 정말 한해동안 골치거리였다. 다 되어있을것 같이 말하지만 뜯어보면 버그와 난해한 코드들의 집합. 이게 내가 마주했던 오픈소스의 모습이었다. 내가 모르는 부분이 있고 잘 알지 못해서, 이해를 못해서 어렵게 느껴지는 부분들도 물론 있지만 그래도 이정도까지 어려울줄은 몰랐다. 내가 적용한 코드들이 과연 신뢰할수 있는지 끊임없이 의심을 하게 만들었던 오픈소스. 그런데 이게 내년에도 계속 될것 같아서 더 걱정된다. 

그리고 다양한 인증 방법들. Oauth를 기본으로 해서 OIDC까지. SAML 도 있긴 했지만 여의치 않아서 Oauth 와 OIDC를 주로 사용했다. 봐도봐도 헷갈렸던 Flow들. 알고 있다고 생각했는데 어??? 라는 의문을 던지게 했던 순간들. 이게 아니네?? 라는 허탈함을 느꼈던 순간들. 이런 순간들이 한해동안 되풀이 되었던것 같다.


7. 방화벽 지옥


이건 뭐...... 정말 할말을 잃게 만든다. 로컬 PC 와 VDI IP 에 대한 접근 방화벽을 대체 얼마나 뚫은건지 이제는 셀수도 없다. 생각하면 생각할수록 골치아프고 시간을 빼앗아가는 방화벽. 정말 싫다.


8. 건강


나이를 먹어서인지는 몰라도 이번에는 목때문에 꽤나 고생을 했다. 그리고 지금도 고생중이다. 자세가 안좋아서 목디스크 증상은 있었는데 이렇게 팔이 아팠던 적은 없었다. 꽤나 통증이 심해서 병원도 자주 가고 물리치료도 많이 받았다. 목부분에 따끔한 주사도 몇방 맞고. 어찌나 무섭던지. 그래도 이제는 좀 괜찮아져서 다행이다. 계속해서 오래 모니터를 보다보면 나도 모르게 자세가 개판이 된다. 그래서 요즘은 계속해서 자세를 바로 잡으려고 노력중이다. 건강을 잃으면 할수 있는게 없으니 좀더 신경쓰도록 해야겠다.


9. 고민, 그리고 또 고민


올 한해는 특히나 머리가 많이 복잡했다. 그중 가장 큰 고민거리는 "나는 과연 잘 하고 있는가? " 에 대한 의문이다. 항상 잘 하고 싶고 항상 발전하고 싶다. 어제보다는 좀더 나아진 내가 되고싶고 앞으로 더 많은 것을 알고 싶다. 그렇게 생각을 하다보니 나는 과연 좀더 발전하고 있는지 항상 물어보게 된다. 내가 하고 있는게 잘하고 있는건가? 맞게 진행을 하고 있는건가? 나는 정말로 발전을 했나? 회사 내에서 연차가 쌓이다 보니 이런 고민들을 정말 자주한다. 그리고 한없이 부족한 내 모습을 찾게 된다. 그리고 거기에서 오는 조급함이 나를 예민하게 만들고 여유가 없게 만들었던것 같다. 혼자 고민하지 말고 좀더 도움을 받자. 주변의 많은 선후배들이 있다. 혼자 끙끙거리면서 해결될 일도 아니고. 좀더 주위를 살펴보고 돌아보면서 내 위치를 바라볼수 있는 내가 되어야 겠다.



마무리 

순서도 없이 그냥 생각나는 키워드 대로 글을 적어봤다. 2019년을 마무리 할때 쯔음에 이 글을 다시 읽는 다면 어떤 생각을 하게 될까? 

다만 그때에는 후회하는 일보다는 잘 한일들이 더 많아서 내 스스로에게 칭찬의 박수를 해줄수 있었으면 좋겠다.


728x90
반응형
저작자표시 비영리 변경금지

'P's Life' 카테고리의 다른 글

2019년을 돌아보면서.  (0) 2019.12.24
애드센스 드디어 100달러가 넘었다.  (0) 2019.06.04
아이폰 8+ 구입 후 초기 불량으로 교체한 이야기.  (2) 2018.07.16
축! 방문자 10만 돌파 ^^  (0) 2018.04.21
2017년 블로그 결산  (0) 2018.01.10
반응형

edX사이트에서 Introduction to ReactJS 강의를 들으면서 정리한 내용입니다. 

 

2018/04/18 - [Development/React] - edX - Introduction to ReactJS Module1 내용정리

 

 

Class Components

- Class Component

Class Component 는 Functional Component 와 다르게 React Component 가 라이프사이클 메소드(Life Cycle method) 와 상태(state) 를 가질수 있도록 해준다. Class Component는 this.state, this.props 를 가지고 있다. 

 

1
2
3
4
5
class Welcome extends React.Component{
    render(){
        return <h1>Hello World!</h1>
    }
}
 cs

 

- Render()

render() 메소드는 Class Component 에서 React Element를 리턴할때 사용된다.

 

- Adding properties to Class Components

Class Component의 property는 this.props 를 통해서 접근가능하다. 

 

1
2
3
4
5
class Welcome extends React.Component{
    render(){
        return <h1>Message: {this.props.message}</h1>
    }
}
 cs

 

1
<Welcome message="Hello World!"/>
 cs

 

State

- Constructor(props)

constructor() 메소드는 React Component 가 mount 되기 전에 호출되며 component의 기본 상태를 설정하는데 사용된다. 

constructor() 메소드 시작에 super(props)를 호출하는것은 중요하다. 안할 경우 this.props 가 정상적으로 동작하지 않을 수 있다. 

constructor() 메소드의 첫번째 파라메터는 component에 전달되는 속성을 나타낸다. 

 

1
2
3
4
5
6
7
8
class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Hello World!</div>
    }
}
 cs

 

- Adding an initial state to Class Component

Class Component 의 state 는 반드시 object 형태로 선언되어야 한다. 

 

1
2
3
4
5
6
7
8
9
class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {foo:123,bar:456}
    }
    render(){
        return <div>foo:{this.state.foo} bar:{this.state.bar}</div>
    }
}
 cs

 

- Updating State

setState(updater, [callback]) 을 통해서 상태 업데이트가 가능하다. 상태를 업데이트 하는 것은 비동기식이기 때문에 옵션으로 callback 메소드를 호출하게 할수있다. callback 메소드는 업데이트가 완료되면 호출된다. 

setState 메소드는 component life cycle의 updating 단계를 시작하는 트리거가된다. 이것 때문에 sshouldComponentUpdate() 메소드가 false를 리턴하지 않으면 component가 다시 렌더링 된다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {message:"initial message"}
    }
    componentDidMount(){
        //updating state
        this.setState({message:"new message"})
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}
 cs

 

- Updating state based on previous state

setState() 메소드는 Component의 상태를 즉시 업데이트 하지 않고 큐에 넣어둔 후 나중에 진행된다. 렌더링을 좀더 효율적으로 하기위해서 batch형태로 업데이트 한다. 

아래 소스에서 setState 메소드를 여러번 호출하지만 state value 는 1만 증가한다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {value:0}
    }
    componentDidMount(){
        //updating state
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}
 cs

 

setState() 메소드는 첫번재 파라메터로 메소드를 사용할수 있으며 기존 상태와 설정을 넘겨준다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {message:"initial message"}
    }
    componentDidMount()
        //updating state
        this.setState((prevState, props) => {
            return {message: prevState.message + '!'}
        })
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}
 cs

 

- State is not mutable

State 는 오직 읽기만 가능하기 때문에 임의로 변경해서는 안된다. 

 

Life Cycle Methods

- Mounting Phase Methods

mounting 단계는 component가 생성되거나 DOM 에 렌더링할때 시작된다. 

  • constructor(props) : component 가 처음 초기화할때 오직 한번만 호출된다.
  • componentWillMount() : component 가 mount 하려고 할때 호출된다.
  • render() : component가 렌더링 할때 호출된다.
  • componentDidMount() : component 가 mount 된 후에 호출된다.

- Updating Phase Methods

updating 단계는 component state 또는 properties 가 변경될때 시작된다.

  • componentWillReceiveProps(nextProps) : component 가 update  되고 새로운 props를 받았을때 호출된다.
  • shouldComponentUpdate(nextProps, nextState) : 새로은 props는 받고 update 하려고 할때 호출된다. 이 메소드가 false 이면 componentWillUpdate(), render(),  componentDidUpdate() 는 실행되지 않는다.
  • componentWillUpdate(nextProps, nextState) : update 될때 호출된다. 
  • render()
  • componentDidUpdate(prevProps, prevState) : update  끝나고 호출된다.

- Unmounting Phase Methods

unmounting 단계는 component 가 DOM 에서 제거될때 시작된다. 

  • componentWillUnmount() : component 가 unmount 되고 즉시 호출된다. 

 

Event Handlers

- Adding Event Handlers

React 와 HTML 에서의 이벤트 핸들러 차이

  • React 에서는 JSX {} 을 사용해서 정의한다.
  • React 에서는 이벤트 이름을 쓸때 camelCase 를 사용한다. 
1
2
3
4
5
React
<button onClick = {clickHandler} >Click Me</button>
 
HTML
<button onclick = "clickHandler()" >Click Me</button>
 cs

 

- Binding Event Handlers to Claas Component

이벤트 핸들러는 Class Component 내부에 정의 해야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {count:0}
        //binding is necessary to make `this` point to the correct object
        this.clickHandler = this.clickHandler.bind(this)
    }
    clickHandler(){
      //increments the count of the state
      this.setState((prevState,props) => {
        return {count: prevState.count + 1}
      })
    }
    render(){
        //renders a button that displays the state count
        return <button onClick = {this.clickHandler}>{this.state.count}</button>
    }
}
 
ReactDOM.render(
  <Counter/>,
  document.getElementById("root")
)
 cs

 

 

728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[React] Warning: Each child in a list should have a unique "key" prop.  (0) 2022.08.12
[React] React.useState()  (0) 2022.08.12
edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
반응형



  요즘 보면 JavaScript 라이브러리와 프레임워크들을 정말 많이 사용하고 있고 그 사용 폭도 점점 넓어지고 있다. 종류도 많지만 각각의 특성도 다양해서 정말 따라가기 힘들다. 워낙 넓다보니 뭐부터 시작해야 할지도 잘 모르겠다. 최근 동기들과 React를 조금씩 공부하고 있는데 React 와 Vue의 차이를 좀 알아볼겸 이번 리뷰 도서로 선택을 했다. 



보통 모르는 언어를 처음 접할때에는 가장 중요한게 이론이다. 아무생각없이 Copy&Paste만 해가지고는 처음에는 좀 빠를지 몰라도 나중에는 막히게 된다. 이 책도 읽다보면 빠르게 진도를 나갈수 있는 책은 아니었다. 특히 나같이 Javascript 에 대해서 많은 지식을 가지고 있지 않은 사람들에게는 정말 천천히 끈기를 가지고 읽어야 하는 책이다. 책 내용을 보면 정의나 속성, 원리에 대해서 정말 자세하게 설명해주고 있다. 그래서 읽다가 혹시 이거 번역서인가? 라는 생각도 했다. 책 구성이나 디자인이 약간 O'reilly 에서 나오는 책같은 느낌이 들어서였다. 그런데 그게 아니었다. 정말 이렇게 자세하고 꼼꼼하게 설명해준 저자 분이 정말 대단하다는 생각이 들었다.


특히 Chapter 3에 나와있는 Vue.js 의 주요 개념들은 처음 접하는 나에게 많은 도움을 주었다. 보통 Chapter 별로 하나씩 하나씩 설명해주는게 일반적인데 일단 먼저  개념에 대해서 설명을 해주니 전체적인 연결고리들을 좀더 이해하기 쉬웠다.


쉽지는 않겠지만 Vue.js에 대해서 관심이 있거나 시작하려는 사람들은 이책을 읽어보면 많은 도움을 받을 수 있을거 생각이 된다. 


"<Vue.js 첫걸음>" 의 대한  자세한 내용은 한빛미디어 홈페이지에서 확인 하실 수 있습니다."


728x90
반응형
저작자표시 비영리 변경금지

'Enjoy Life > 책을 읽자!!' 카테고리의 다른 글

[길벗 개발자 리뷰어] 수학과 알고리즘의 조화!!! 알고리즘산책: 수학에서 제네릭 프로그래밍까지  (0) 2018.08.29
[나는 리뷰어다] 자바 개발자라면 한번 쯤 읽어보자.!Think Data Structures (자바로 배우는 핵심 자료구조와 알고리즘)  (0) 2018.07.15
[길벗 개발자 리뷰어] Node.js 마이크로 서비스 코딩 공작소  (0) 2018.04.19
[나는 리뷰어다] 아주 큰 스케치북 그림그리기 & 색칠하기!!  (0) 2018.04.07
[나는 리뷰어다]Hello Coding 파이썬  (0) 2018.02.05
반응형

edX사이트에서 Introduction to ReactJS 강의를 들으면서 내용을 정리해봤다.


What is ReactJS?

ReactJS 는 상태에 따라서 View 레이어를 만들어 주는 라이브러리이다.

React Compnents는 Virtual DOM 을 생성한다. ReactCompnent의 상태가 변경되면 새로운 Virtual DOM을 생성하고 차이점을 분석한다. 그리고 효과적인 방법으로 HTML  DOM 에 반영한다.


Rendering Elements

- React Elements

React Elements 는 DOM 노드에 표현되는 Object 이다. JSX를 사용해서 syntax를 작성한다. React Elements와 React Components는 다르다. React Elements를  DOM 에 표현하기 위헤서는 ReactDOM.render() 메소드를 사용해야 한다.


- ReactDOM.render()

ReactDOM.render() 메소드는 HTML DOM의 특정 부분에 React Elements를  렌더링하는데 사용된다. 대부분 React 어플리케이션에는 한개의 root node 가 있고 그 안에 렌더링 되는데 root node가 여러개 있을수도 있다.


1
<div id="root"></div>
cs


1
2
3
4
ReactDOM.render(
        <h1>Hello World!</h1>,
        document.getElementById("root")
)
cs


JSX

- What is JSX?

JSX는 Javascript의 syntax 를 확장한 것으로 HTML 태그를 사용해서 Javascript안에 React Elements를 작성할수 있게 해준다.


1
var element = <h1>Hello World!</h1>
cs


- Using JSX with JavaScript Expressions

Curly braces ({}) 를 사용해서 표현한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var str = "World!" 
var element =  <h1> Hello {str}</h1>
 
var item = {
    name: "Cheese",
    price: 5
}
var element = <p>{item.name} : ${item.price} </p>
 
var length = 20
var width = 10
function calculateArea(x,y){
    return x * y
}
 
var element = <div>The Area is: {calculateArea(length,width)}</div>
cs


- Using JSX with Attributes

Attribute 표현시 절대로 curly braces를 quotes("")로 감싸면 안된다. 


1
 var element = <img src ={product.imageURL}></img>
cs


- Style Object

위에서와 같이 동일하게 style object 를 curly braces  안에 넣어주면 된다.

1
2
3
4
5
6
7
var styleObject = {
        backgroundColor: 'red',
        color:'blue',
        fontSize: 25,
        width: 100
}
var element = <input style = {styleObject}/>
cs


object 로 정의 안하고 바로 사용할 경우에 바깥쪽 {} 는 JSX표현이고 안쪽에 {} 는 style object 를 표현한것이다.

1
var element = <input style = {{width:200,height:100}}/>
cs


- Nested Elements

하나로 wrapping  하는 것을 권장한다.

1
2
3
4
5
6
var element = (
        <div>
            <div>Hello World</div>
            <div>Hello World</div>
        </div>
)
cs



Functional Components

- React Components

React Components는 독립적이고 재사용 가능한 React Element를 만들어 낸다. React Components는 Functional Components 와 Class Components로 구성된다.


- Functional Components

Functional Components는 React Elements를 출력한다. 관습적으로 Function의 첫글자는 대문자로 쓴다.

1
2
3
4
5
6
7
8
function HelloWorld(){
    return <h1>Hello World!</h1>
}
 
ReactDOM.render(
    <HelloWorld />,
    document.getElementById("root")
)
cs


- Properties  추가

Functional Components는 React Elements를 출력한다. 관습적으로 Function의 첫글자는 대문자로 쓴다.

1
2
3
4
5
6
7
8
9
function HelloWorld(props){
    return <h1>Message: {props.message}</h1>
}
 
ReactDOM.render(
    <HelloWorld message="Hello World!"/>,
    document.getElementById("root")
)
 
cs


Composition

- Composing Components

Functional Components 는 다른 Functional Components 를 결과 값으로 포함할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function ShoppingTitle(props){
    return (
        <div>
            <h1>{props.title}</h1>
            <h2>Total Number of Items: {props.numItems}</h2>
        </div>
    ) 
}
function ListItem(props){
    return <li>{props.item}</li>
}
function ShoppingList(props){
    return (
        <div>
            <h3>{props.header}</h3>
            <ol>
                <ListItem item = {props.items[0]}/>
                <ListItem item = {props.items[1]}/>
                <ListItem item = {props.items[2]}/>
            </ol>
        </div>
    )
}
function ShoppingApp(props){
    return (
        <div>
            <ShoppingTitle title = "My Shopping List" numItems = "9"/>
            <ShoppingList header = "Food" items = {[ "Apple","Bread","Cheese"]}/>
            <ShoppingList header = "Clothes" items = {[ "Shirt","Pants","Hat"]}/>
            <ShoppingList header = "Supplies" items = {[ "Pen","Paper","Glue"]}/>
        </div>
    )
}
ReactDOM.render(
    <ShoppingApp/>,
    document.getElementById("root")
)
cs


Conditional Rendering

- Conditional Rendering

Functional Components 의 결과값을 프로퍼티에 따라서 결정할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
function Feature(props){
    if (props.active == true){
        return <h1>This feature is active</h1>
    }
    else{
        return <h1>This feature is not active</h1>
    }
 
}
 
function Feature(props){
    return <h1>This feature is {props.active? "active" : "not active"}</h1>
}   
cs


Module 1 내용 정리 끝.


728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[React] React.useState()  (0) 2022.08.12
[React] edX - Introduction to ReactJS Module2 내용정리  (0) 2018.05.30
[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
map() 메소드 사용  (0) 2017.01.16
반응형

React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 


최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 


아래와 같은 contractData 라는 state를 저장해 놓는다. 


1
2
3
4
5
6
7
8
9
10
11
12
    constructor(props){
        super(props);
 
        this.state={
            contactData:[
                {name:"Abet", phone:"010-0000-0001"},
                {name:"Betty", phone:"010-0000-0002"},
                {name:"Charlie", phone:"010-0000-0003"},
                {name:"David", phone:"010-0000-0004"}
            ]
        };
    }
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
render(){
        return(
            <div>
                <h1>Contacts</h1>
                <ul>
                    {/*
                    <ContactInfo name="Abet" phone="010-0000-0001"/>
                    <ContactInfo name="Betty" phone="010-0000-0002"/>
                    <ContactInfo name="Charlie" phone="010-0000-0003"/>
                    <ContactInfo name="David" phone="010-0000-0004"/>
                    */}
                    {this.state.contactData.map((contact, i) => {
                        return (
                            <ContactInfo name={contact.name} phone={contact.phone} key={i} />
                        );
 
                    })}
                </ul>
            </div>
        );
    }
cs


위 코드에서 주석을 친 부분은 map() 메소드를 사용하기 전의 코드이다. 


그 아래 부분이 위에서 정의한 state를 사용해서 가져오는 부분이다.


최근에 자바에서 사용하는 stream 관련된 내용을 봐서 그런지 그렇게 낯설지는 않다. 실제로 짤수 있을지는 잘 모르겠지만...


말 그대로 contactData 있는 내용을 contact로 하나씩 받아서 contractInfo의 내용을 채워 넣고 있다. 



출처 : https://velopert.com/957


728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
반응형

props 는 컴포넌트에서 사용할 데이터중 변하지 않는 데이터를 다룰때 사용한다. 


Parent 컴포넌트에서 child 컴포넌트로 데이터를 전달할 때 props를 사용한다. 


컴포넌트의 render() 메소드 내부에 {this.props.propsName} 형태로 넣고 컴포넌트에서 사용할 때에는 <> 안에 propsName='value' 형태로 값을 설정 한다. 


- render() 메소드 내부


1
2
3
4
5
6
7
8
9
10
11
12
13
class App extends React.Component {
    render(){
 
        let text = "Hello HI";
 
        return (
            <div>
                <Header title={this.props.headerTitle}/>
                <Content title={this.props.contentTitle} body={this.props.contentBody}/>
            </div>
        );
    }
}
cs


- 컴포넌트


1
2
3
4
ReactDOM.render(<App headerTitle="Welcome"
                    contentTitle="Stranger"
                    contentBody="welcome to ex App"/>
                    , rootElement);
cs



- Default 값 사용시에는 App 내부에 className.defaultProps={propsName:value} 로 설정해주면 된다. 


1
2
3
4
5
6
App.defaultProps={
    headerTitle:'Default header',
    contentTitle: 'Default contentTitle',
    contentBody: 'Default contentBody'
};
 
cs


- propType 지정


1
2
3
4
Content.propType={
    title: React.PropTypes.string,
    body: React.PropTypes.string.isRequired
};
cs


title 과 body 를 모두 string으로 지정하고 body 는 필수로 설정한다. 필수 지정일경우 값이 없으면 오류가 난다.




<이 문서에 작성된 소스는 https://velopert.com 에 게시된 소스 입니다. >


----------------------------------------------------------------------------------------------------------------


추가.


React 에서는 단방향 흐름을 강조하는 것 같다. 그래서 props는 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터이며, 또한 이것을 하위 컴포넌트에서 변경되는것은 권장하지 않는것 같다...



728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

npm install --save --save-dev  (0) 2017.05.30
map() 메소드 사용  (0) 2017.01.16
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
jquery radio button 속성 설정  (0) 2013.09.04

+ Recent posts

티스토리툴바