반응형

 

실제로 개발을 할때 HTML과 CSS 는 중요한 부분을 차지한다. 그럼에도 불구하고 다른 언어들에 비해서 소홀히 대해지는 경우가 많다. 나또한 다른 언어 공부는 열심히 하지만 정작 HTML 과 CSS 부분은 모르면서도 공부를 해보려고는 하지 않았다. 그저 그때 그때 인터넷에서 찾아서 복사, 붙여넣기만 해왔을 뿐이었다. 그런데 여기 HTML과 CSS 에 대해서 기본부터 심화까지 배울 수 있는 책이 있어서 소개하고자 한다. 

 

책은 총 12개의 Chapter로 구성되어있다. 그리고 각 Chapter 는 다음과 같이 구성되어있다. 

 

무엇을 배우나요?

각 Chapter 에 들어가기 전에 무엇을 배울지에 대해서 설명을 해준다. 그리고 배운 것을 바탕으로 어떤 것을 만들지에 대해서 살짝 맛보기를 보여준다. 

 

코드, 실습

실제 내용 부분에서는 정말로 많은 양의 실습 코드들과 실습의 결과 화면들을 보여준다. CSS 자체가 속성이 많고 응용도 많기 때문에 양이 많아 질수 밖에는 없지만 오히려 그 부분이 마음에 들었다. 눈으로 읽어도 결과를 짐작할수 있는 부분들은 그냥 넘어가도 되고 약간 생소한 부분은 실제로 코드를 작성해 보면서 결과화면과 비교를 해볼 수 있다. 각각의 속성에 대해서 비교해주는 부분들도 있어서 그 차이점을 파악하기도 쉬웠다. 

 

TIP

책 중간중간에 이렇게 TIP 으로 설명해 주는 부분들이 있다. 이 부분들은 HTML과 CSS를 작성하면서 자주 실수하는 부분들 또는 유용하게 사용되는 부분들에 대해서 따로 언급을 해준다. 위 그림처럼 내가 작성했던 코드가 내가 생각한 결과를 보여주지 않을 때가 있다. 그런 경우에 왜 그런지 그 이유에 대해서 설명을 해준다. 실제 CSS 를 적용하다 보면 분명이 적용이 되어야 할 속성인데 적용이 안되는 경우를 본적이 있다. 그런 경우에 CSS 를 정의한 부분을 따라가서 중첩되는 경우가 있는지부터 찾아보면서 시간을 많이 소비하게 되는데 이런 TIP들을 잘 기억하고 있으면 그런 시간들을 줄여줄수 있을것 같다.

 

맺음말

"바이블" 이라는 책 제목 답게 기초부터 심화까지 자세히 살펴볼수 있는 책이다. 부록까지 합치면 약 600페이지가 넘는 책이다. 그럼에도 불구하고 어렵지 않게 볼수 있는 책이라고 생각한다. 또 저자가 직접 강의하는 유투브 강의도 있어서 책을 이해하는데 도움을 받을 수 있다. 만약 HTML 과 CSS 에 대해서 나처럼 어려움을 느끼는 분들이 있다면 꼭 한번 읽어보기를 권해주고 싶다.

 

728x90
반응형
반응형

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
반응형

+ Recent posts