초보 개발자

map함수를 활용하여 배열에 있는 요소를 수정해주려고한다. map은 array의 각 item에서 function을 실행하는 js function이며, function의 result를 갖는 array를 우리에게 다시 준다. 예를들어 아래와 같은 경우 배열은 [1,2,3,4] 에서 [0,0,0,0]으로 바뀌고 console.log에는 1 2 3 4가 각각 찍혀있는 것을 확인할 수 있다. 쉽게말해서 map함수안에 함수가 있고 그 함수의 인자로 각 배열의 요소가 들어온다. 그리고 return값이 그 요소의 값으로 바뀐다. ( return이 없으면 undefined를 반환함 ) 하지만 원래의 값에는 영향을 주지 않는다. const array = [1,2,3,4] array.map((current) => { con..

react를 활용하여 영화 웹 서비스를 만들어 보려고한다. 먼저 npx create-react-app movie_app_2021명령어를 사용하여 CRA를 만들어준다. npm은 현재 최신 버전의 노트 패키지를 데스크톱에 설치해 주는 도구이고, npx는 최신 버전의 노드패키지를 사용하게 해주는 도구이다. npx는 설치할 노드 패키지를 최신 버전으로 다운로드해서 설치한 다음 데스크톱에 남기지 않고 삭제한다. 한번 사용하고 말 노드 패키지를 굳이 데스크톱에 남길 필요는 없을 것이다. git에 repository를 만들고 git remote add origin 주소를하여 연동해주자!! 이제 npm start를 하면 CRA가 실행이된다!!! 오우야 App.js에서 이렇게 html을 return하는 함수를 만든다. ..

delete는 간단하다 . delete를 누르면 "delete"라는 정보가 함수로 가고 if 문을 통해 접속한다 앞서와 마찬가지로 배열을 복제하고 selected_id와 일치하는 정보를찾아서 slice로 지운 뒤 state에 있는 content에 바꿔치기 하면 끝난다.

내가 선택한 글에서 Update버튼을 누르면 그 글의 정보를 props에 보내고(data) Update form이 나온다. 거기 input title과 textarea의 value값에 this.props.data.title, this.props.data.desc를 적으면 콘솔창에 오류가 뜨면서 값이 변경이 되지 않는다. 확인 해보면 onChange 이벤트를 사용하라는 메시지가 나온다. onChange이벤트를 사용하면 어떠한 단어를 적더라도 바로 이벤트가 발동이 되어버려 아무것도 할 수가 없게된다. UpdateContent에 state를 만들고 그 state안에 title과 desc의 값이 바뀔 때마다 저장하는 형식으로 만들면 이 문제를 해결 할 수있다. 여기서 가독성을 높이기 위해 함수로 만들었다. th..

props는 read-only이고 내부에서 값을 바꾸려고 하면 에러가 난다. 상위 컴포넌트에서 하위 컴포넌트로 값을 보낼때는 props를 이용하여 값을 전달 할 수 있다. 반대로 하위 컴포넌트에서 상위 컴포넌트로 값을 보낼때는 어떻게 할까? event를 활용해야한다. 상위 컴포넌트에서 하위 컴포넌트로 함수를 만들고 ex (this.setStatus({mode : id(매개변수)}) 하위 컴포넌트에서는 그 함수의 매개변수(id)에 값을 넣어 다시 그 값을 전달받아 상위에서 값을 변경한다 CRUD에서 Create를 만들어보았다. CreateContent.js 에서 form을 전송했을 때(submit 버튼을 눌렀을 때) 실행되는 이벤트를 설정하고 e.target.title(name의 값).value를 하면 f..

class Nav extends Component { render() { const data = this.props.data; let list = []; for (var i = 0; i {data[i].desc} ); } return {list}; } App의 render안의 코드 let _title, _desc = null; if (this.state.mode === "welcome") { _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === "read") { _title = this.state.content[this.state.selected_id].title; _desc = t..

react에서는 props값이나 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출 된다 그리고 그 하위의 컴포넌트들의 render도 다시 호출 된다 -> 화면이 다시 그려진다. 이번에 해볼 것은 Subject에 있는 a태그에 event를 주어서 state.mode = "welcome" (default) 값을 "read"로 바꾸어 볼 것이다. 이것에 따라서 Content의 내용이 바뀌도록 설정해보았다. a 태그에 onClick={function(e){ e.preventDefault(); this.setState({ mode: "read"}) }.bind(this)} 결과적으로 이렇게 해주면 세팅이 된다 1번째 주의할 것 onclick onClick 소문자로하면 인식..

어떤 컴포넌트가 실행이 될 때 랜더라는 함수보다 더 일찍 실행이 되면서 그 컴포넌트를 초기화 시켜주는 코드는 constructer를 짜고 그 안에다가 적어준다. (초기화를 담당!!) state의 개념이 나오는데 조금 헷갈린다. props와 같이 쓰이는데 대략 내가 느낀 점은(틀릴 가능성 농후) state는 class의 기본 설정값이다. 초기화를 통해서 값을 설정해주고 하위 컴포넌트들의( import를 통해 가져온 ) {this.props.title}과 같이 설정 해둔 곳에 이렇게 적어둠으로써 상호작용을 할 수 있다. 상위의 클래스의 state값을 props를 통해 가져오고 그 가져온 값을 가공하여 return 하는 느낌이다 class Nav extends Component { render() { cons..