반응형 TIL129 코드스테이츠 소프트웨어엔지지어링 부트캠프 +29일 오늘한것 객체 코플릿, 리액트복습, Koans복습했다. 복습을 하고 얻은것이 꽤 있다. 리액트에선 변수가 state다 말 그대로 리액트에서는 변수를 state로 사용한다. 그리고 state의 업데이트는 오직 useState로만 할 수 있음. 새로운 값 할당은 물론이고 , pop(), unshift() 등 어떤것도 사용하면 안된다. 사용할 시 리렌더링이 되지 않는등의 문제가 일어날 수 있다. 아고라스테이츠 답장 const Tweet = ({ tweet }) => { return ( ..이하생략 위와 같은 Tweet컴퍼넌트가 있고 아래 코드에서 Tweet컴퍼넌트의 props를 이용해 dummyTweets의 각 요소를 전달했다. {dummyTweets.map(i=>{ return ( ) })} dummyTwe.. 2021. 8. 17. 코드스테이츠 소프트웨어엔지지어링 부트캠프 +28일 오늘 한 것 알고리즘 복습하고 리액트 공부했다. 저번에 카페 키오스크 만든걸 리액트로 해보려고 안간힘을 쓰다가 포기했다. dom으로 만드는게 훨씬 쉬운데 리액트가 편리하다고?? 아직은 이해가지 않지만, 내가 리액트를 잘 몰라서 그런거겠지 리액트 하다가 useState 를 사용할 때, console창과 데이터 계산에서 state가 한박자 늦게 찍히는 문제가 있었다. 리액트의 비동기 시스템때문에 그렇다고 한다. 이를 해결하기 위해서 setState에 콜백함수를 넣거나 아직은 배우지 않은 useEffect 를 사용하면 된다고 한다. 우선 uesEffect 를 사용해보았다. 아래 코드는 +1, -1 버튼을 누르면 태그의 number가 변하는 코드이다. /// 쓸데없는 부분은 생략했다. function Count.. 2021. 8. 16. 코드스테이츠 소프트웨어엔지지어링 부트캠프 +27일 스프린트 베어미니엄을 겨우 끝냈다. 코드스테이츠 학습자료에 나왔던 내용들인데 막상 할때는 다 잊고 적용하지 않았던 것들이 많다. 에러가 나면 해결책이 학습자료에 나와있는데 기억하지 못하고 검색하다가 해결책을 알아내고 나서, 아 홈페이지에서 봤던내용이구나 하는 것들이 많았다. 예를들면 이 사실을 간과하고 계속 unshift를 사용했다. unshift를 사용했기 때문에 리렌더링이 되지 않았고, 계속 새로고침을 해야만 원하는 화면이 나왔다. 하지만 useState에 spread연산자를 사용하여 useState([추가할배열,...원래배열])라고 작성하니 해결되었다. 2021. 8. 14. 코드스테이츠 소프트웨어엔지지어링 부트캠프 +26일 리액트 Props와 State Props : 컴퍼넌트의 속성(Property)이다. 외부에서 전달받는 값으로 컴퍼넌트 내부에서 변하지 않는 값이다.(immutable) 부모 컴퍼넌트에서 전달받은 값이다. (React는 하향식 데이터 흐름원칙을 갖고 있다.) props전달방법 props 매개변수 사용 function Child(props) { return ( {props.text} ); }; function App() { return ( ); } export default App; props 는 객체이다. 이 객체의 { key : value } 는 컴포넌트에서 정의한 { attribute : value } 의 형태를 띈다. 따라서 JavaScript 에서 객체의 value 에 접근할 때 dot notat.. 2021. 8. 14. 이전 1 ··· 23 24 25 26 27 28 29 ··· 33 다음 반응형
