댓글4. 기능구현(U) 1. span에 줄 onClick 이벤트 함수 선언 1-1. 현재 타겟이 되는 span의 내용 가져오기 handleClick = e => { console.log(e.target.innerHTML) } 1-2. items의 li 수정해서 span에 onClick 이벤트 주기 렌더될 때는 content의 내용이 나타나고, span 클릭 시 handleClick 이벤트 실행 items = () => this.props.list.map((v, k) => { return ( {v.userid} {v.content} {v.date} ) }) 2. 상태를 저장할 state 선언 2-1. 클릭 시 content를 저장하기 위해 CommentList 컴포넌트에 state값 주기 상태의 update 속성은 클릭 시, i.. 2022. 4. 25. 댓글3. 기능 구현(C) -수정중 상위가 아닌 현재 컴포넌트(CommentForm) 컴포넌트에 state 선언해서 인풋에 넣은 내용만 최신화 및 submit 눌렀을 때 인풋에 어떤 내용 있는 지 정확하게 확인 가능 1. 인풋박스 상태 최신화 class CommentForm extends React.Component { state = { value: '' } render() { return( ) } } 함수를 만들어서 밸류 값을 반영해보자 handleChange = e => { const {value} = {...e.target} this.setState({ value }) } 폼 컴포넌트의 인풋에 이벤트 작성 onChange={this.handleChange} 2. 폼을 제출할 때 이벤트를 발생시키기 위해 함수 선언 후 이벤트 작성 ha.. 2022. 4. 25. 댓글2. 기능 구현 (R) 목차 App컴포넌트로 state 끌어올리기 state의 list, CommnetList 컴포넌트에 props로 전달 리스트 렌더하기 componentDidMount() 메서드로 CSR 누적 작성 코드 list에서 state를 선언하면 데이터를 뿌리는 것은 쉽다. 하지만 컨텐츠의 내용은 사용자가 Form의 인풋 내용을 서브밋 하는 내용이 들어가야 한다. 따라서 Form의 내용을 List로 받아야 함 props는 부모 컴포넌트에서 자식으로 전달할 수 있음 따라서 상태 끌어올리기 스킬을 통해서 상태를 Comment로 끌어올려서 Comment에서 자식인 Form과 List로 전달해야 함 하지만 현재 코드에서는 Comment 컴포넌트에 props.children을 입력했으므로 앱 컴포넌트에 state를 입력할 것.. 2022. 4. 25. 댓글1. 디자인 목차 기본 틀 작성 form list 누적 작성 코드 게시판 view 페이지에 들어갈 댓글 기능을 구현해보자! 틱택토 게임 때 작성했던 레이아웃을 가지고 와서 컴포넌트만 변경해서 기본 틀을 작성해보자! 다만, 이번에는 props 속성 중 children이라는 속성을 사용해서 자식이 아닌 자손에게 props를 넘겨주는 스킬을 사용해 볼 것이다. props.children이란? props 속성 중 children 사용 시, 자식 뿐만이 아닌 자손에게 props를 전달 가능 앱 컴포넌트에도 상태가 존재하는 경우 예를 들면 (로그인 기능의 로그인 구분값) Comment 컴포넌트가 댓글에 대한 state값을 가지고 있는 경우 state 값을 App 컴포넌트에 있는 아이들이 Comment 컴포넌트에 넘겨주고 Com.. 2022. 4. 25. 이전 1 다음
