본문 바로가기
반응형

전체 글130

conditional rendering 어떠한 조건에 따라서 렌더링이 달라질 때 자주 쓰이기 때문에사용 방법과 원리에 대해서 잘 이해하고 넘어가야한다. truthy falsy boolean 자료형 true / false true는 아니지만 true로 여겨지는 값: truthy {} : empty object [] : empty array number : not zero "0", "false" : String, not empty false는 아니지만 false로 여겨지는 값 : falsy false 0, -0 : zero, minus zero '', "", `` : empty string null undefined NaN Element Variables (엘리먼트 변수) 렌더링 해야할 컴포넌트를 변수처럼 다루고 싶을 때 사용한다. import .. 2022. 10. 11.
네트워크란? 🌐네트워크란? 노드들이 데이터를 공유할 수 있게하는 디지털 전기 통신망의 하나이다. 분산되어 있는 컴퓨터를 통신망으로 연결한 것을 말한다. 노드간 연결을 사용하여 서로에게 데이터를 공유한다. 인터넷이란? 가장 큰 망을가진 하나의 네트워크이다. TCP/IP 프로토콜 기반으로 전 세계 수많은 컴퓨터와 네트워크가 연결된 광범위한 통신망을 의미한다. 인터넷에 연결되는 네트워크는 가정 네트워크처럼 소규모부터 기업 네트워크, 글로벌 네트워크 등 다양하게 존재하고 있다. TCP/IP상에서 운용되는 인터넷 서비스 WWW, E-Mail, FTP, Talent(원격접속) 인터넷과 www www은 통신망(인터넷)을 이용해서 웹 서비스의 공유를 할 수있다. 🌐네트워크의 분류 각각의 용도는 다르지만 컴퓨터끼리 통신하게 하는 역.. 2022. 10. 7.
리액트에서 이벤트 다루는 방법 이벤트 핸들러 바인딩이란? 컴포넌트(Component)와 이벤트 함수를 연결(bind)하는 것이다. 바인딩하지 않아도 이벤트 함수는 실행이 되지만, 누가(어떤 컴포넌트가) 호출을 했는지 알 수 없다. 바인딩하지 않았는데, 이벤트 함수에서 this.state 또는 this.props를 사용할 경우 undefined로 처리된다. 1. 자바스크립트 함수는 객체이다. const App = () => { const nav = useNavigate() const goTo = () => { nav('ex-router') } const goToWrapper = () => { goTo() } return ( 가자!! ); }; 이벤트 코드를 그대로 전달하는 것이 아닌 함수의 형태로 객체를 전달한다. const App =.. 2022. 10. 4.
리액트에서 setState는 비동기로 동작 ?? setState는 비동기로 동작하는 것을 간과하지 못한 채 코드를 짜게 되면서 깊은 늪에 빠지게 됐다. 이 실수는 초보자라면 당연히 맞닿을 수 있는 일인데 해결 방법을 누가 딱딱 알려주면 얼마나 좋을까!!! 하여튼.. 깊게 공부하지 않았던 나의 미스텤... 이러한 실수를 범하고 있는 꽤 많은(?) 아니 초급자.. 분들께 좋은 피드가 됐으면 좋겠다... 🌻state state는 상태 변화값을 보여준다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내보내는것이 아닌 해당 컴포넌트 내부에서 데이터를 전달한다. 함수 내부에서 선언되어 사용되는 변수 처럼 컴포넌트 내부에서 사용이 가능하다. state는 변경 가능한 자바스크립트 객체이며 state의 상태가 변하면 re-randering된다. ex) 검색 창에 글을 .. 2022. 10. 3.
728x90
반응형

티스토리툴바