Javascript - Comment 구현하기 2

---

목차

1. 디렉토리 구조와 용어 

2. EVENT

3. this

---

 

 

1. 디렉토리 구조와 용어 

 

/
| - /js
| --- /core
| ------- component.js
| --- /src
| -------- /components
| --------------- comment.js
| -------- /contents
| --------------- /comment
| -------------------- form.js
| -------------------- item.js
| -------- /pages
| --- app.js
| --- index.js

- comment  component를 바라보는 form, item(list)가 있고 트리구조로 comment는 app을 이렇게 가장 큰 Component를 상속받아서 form inputbox에 적은 댓글을 item(list)에 보여줄수있다.

 

- Component 에는 target, props, state를 멤버변수로 받고, setup(), template(), setState(), mounted(), render(), setEvent(), addEvent() 메서드가 있다.

  - Component를 상속받은 하위 클래스에서 위의 메서드를 사용하여 화면을 그리고 렌더한다.

 

- index.js에서는 app.js으로 실행이 이루어지게 되며, app에서는 화면을 그리는데 target으로 지정해준다음, comment, comment-form, comment-list 를 붙여나가는것이다.

 

 

 

 

 

2. EVENT

 

- 이벤트 중복처리를 해결하기 위해 setEvent()에서 querySelector로 addeventListener를 사용할경우 

   - render()전에 실행이 되어서 null값나와서 실행이 되지않는다.

   - 그렇다면 화면을 다 그린다음 실행하는 mounted() 메서드에 옮긴다해도 X

 

 

- 코멘트 하나하나에 이벤트를 주지않고 comment-list 에 이벤트를 주어서 코드안에서 조건문으로 이벤트가 실행할것만 찾아서 이벤트를 주는것으로 해야한다!!

      - component에 addEvent() 메서드로 addeventListener의 기능을 넣어 중복처리를 해한다.

 

addEvent(eventType, selector, callback) {
        this.target.addEventListener(eventType, (e) => {
            if (!e.target.closest(selector)) return false;
            // code실행
            callback(e);
        });
        // this.target은 dom객체
    }

 

 

- 이벤트 작동을 확인해보기위해서 comment의 state.comments에 insertItem() 메서드로 push를 주어서 추가한다.

    - 이방법은 리액트에서 상태를 바꿀떄 사용하는 방법으로 꼭꼭 눈에 익혀두기

insertItem(content) {
    const newState = this.state.comments.push({
        id: 4,
        userid: "개굴",
        content: content,
        date: "2023-10-17",
    });
    this.setState({...this.state, ...newState});
}

 

 

 

 

3. this

 

- form에서 이벤트를 사용할때 setEvent() 에서 this.addEvent()를 사용해서  addeventListener를 사용할수있는데

  - 이때 핸들러 함수 또한 메서드로 빼서 사용해준다.

 

- 그러면 이제 데이터를 담아서 넘겨줘야하는데 component에서 멤버변수로  props로 사용해준다.

   - this.props로 length를 알수있고

   - 가지고 있는 데이터를 insertItem에 넣어 댓글을 입력했을때 작성한 글을 list에서 보여줄수있게된다.

 

- 하지만 화살표 함수는 this바인딩이 일어나지않기때문에 bind를 해줘야 this를 사용할수가있다.

 

handleSubmit(e) {
        e.preventDefault();
        console.log("submit 발동!!!!!");
        const inputValue = document.querySelector("#comment-input").value;
        this.props.insertItem(inputValue);
        // 여기서 this는
        // console.log(this); //undefinded
    }
    
setEvent() {
    // console.log(document.querySelector("#commentForm")); // null
    const handleSubmit = this.handleSubmit.bind(this);
    this.addEvent("submit", "#commentForm", handleSubmit);
}

 

 

 

---

※ 생명주기 (Life Cycle)

※ 가독성 좋은 코드를 쓰쟈!!!!!!!!!!!

 

 

※ 교수님 git  참고하기

https://github.com/ingoo-blockchain/lecture/tree/main/Nodejs_2