react

요즘 현대사회에서는 스마트폰이 필수다. 나만해도 눈뜨면 인스타그램을 들어가서 지인들의 최신소식을 확인한다던지 네이버앱을 들어가서 뉴스를 본다. 우리 일상속에서 가장 가깝게 마주하고 있는 부분이 스마트폰 -> 앱 -> 사용자인터페이스 UI로 연결된다. 리액트 공식홈페이지에 가보면 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 쓰여져있다. 말 그대로 리액트는 UI를 개발하는데 원할하도록 도움을 주는 라이브러리라는 것이다. 자바스크립트로 UI를 제어하려면 굉장히 복잡하고 효율이 떨어지는 작업을 하게 된다. 그런 단점을 리액트가 도와준다! 어떻게 도와주는지 알아보자. ✅ 실제 돔과 가상돔(Virtual DOM) UI는 사용자가 버튼을 클릭한다던지 새로운 검색결과를 보여줘야한다 던지 어떠한 ..

컴포넌트를 props bg결과 값에 따라 노출하려고 수정해놨떠니 아래와 같은 오류가 났다.. 왓더?? 왜안되지..? 분명 props값을 true로 하면 컴포넌트 노출이 가능했는데 뭐야 진짜ㅡㅡ!! 바로 써치 ㄱㄱ 대충 번역해보니 리액트 엘리먼트 인자에 값이 null을 던졌다 웅앵~~~ 🤔 찾아보니 공식문서에 해결법이 나와있었음 https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering Conditional Rendering – React A JavaScript library for building user interfaces reactjs.org 드문경우지만 컴포넌트가 다른컴포넌트에 렌더링 되었을때 숨기기를..

👉React hooks란..? 기존 클래스컴포넌트에서 사용하던 리액트 기능들을 함수컴포넌트에서도 사용할 수 있게 된것 이에요. 함수컴포넌트에서도 state기능을 사용할수 있다! 그걸 hooks라고 불러줘! 이런것이죠 //function components function App() { return ( 함수컴포넌트 ); } //hooks const App() => { const [count, setCount] = useState(0); return ( hooks ); } hooks 도입전에 함수컴포넌트는 class 컴포넌트에서 사용하는 state나 라이프사이클을 사용할수 없었어요 return만 가능했죠 그래서 hooks 가 생기면서 함수컴포넌트로도 state와 라이프사이클을 사용할수 있게되었어요 📢우리는 ..

styled components를 이번에 배워서 프로젝트를 만드는 도중 class가 바뀔때 style을 변경하는 것을 단순히 style을 추가하면 되는줄 알았는데 props를 이용해서 할수 있다는 것을 알게되었다. //components 안녕하세요. //style & aside{ position:fixed; right:0; top:0; z-index:9; width:50vw; height:100%; padding:2rem; background:#fff; transform:translateX(100%); transition:all .5s ease; box-sizing:border-box; &.is--open{ transform:translateX(0); } loginOn state가 바뀌면 클래스 is--..

함수형 컴포넌트에서 componentDidMount,componentDidUpdate,componentWillUnmount 의 라이프사이클을 대신해 사용 할 수 있는것이 바로 useEffect 입니다. 그럼 어떻게 useEffect를 사용하는지 확인해봅시다 1. componentDidMount, componentDidUpdate hook const Messege = ()=>{ const [message, setMessage] = useState('안녕하세요'); useEffect(() => { console.log('useEffect 실행'); setTimeout(() => { setMessage("만나서 반가웠어요"); }, 3000) },[]) // 빈 배열 return( {message} ) } u..

사용자가 구글에 키워드를 검색했을때 구글의 Search engine이 웹페이지의 정보들을 읽어서 가장 관련성이 높은 글들을 을 보여줍니다. 이것을 설정할 수 있게 하는 작업이 SEO(Search Engine Optimization) 검색엔진최적화 라고 해요 우리가 JavaScript로 웹사이트를 구축할때 SEO를 고려해야하는 이유는 구현방법을 어떻게 해야 하는지에 따라 사용자환경과 검색결과 순위에 영향을 미칠 수 있기 때문이에요. 어떠한 방법이 있는지 알아봅시다. SSR(Server Side Rendering) 서버에서 렌더링 되는 방식이에요. 클라이언트에서 요청을 하면 서버에서 데이터까지 갖춘 html을 클라이언트에 전달하게 되요. 👍장점(GOOD!) - 웹페이지 로드시 한번의 요청으로 페이지를 구성하..