props, useEffect 부모에 조건 React에서 props와 useEffect는 매우 중요한 요소이며, 이들이 제대로 동작하지 않으면 애플리케이션의 동작에 문제가 발생할 수 있습니다. 먼저, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. props는 불변하며, 자식 컴포넌트에서는 변경할 수 없습니다. props는 컴포넌트가 렌더링될 때마다 새로운 값을 받을 수 있습니다. useEffect는 컴포넌트가 렌더링될 때마다 실행되는 함수입니다. 이 함수는 컴포넌트가 마운트되거나 업데이트되거나 언마운트될 때 실행됩니다. useEffect는 비동기적으로 동작하므로, 컴포넌트가 렌더링되고 나서 실행됩니다. props와 useEffect의 실행 순서는 다음과 같습니다: 부모 컴포넌트에서 props 값을 변경합니다. 자식 컴포넌트가 렌더링됩니다. useEffect 함수가 실행됩니다. 만약 useEffect 함수 내에서 props를 사용한다면, 이 값은

filteredValue문자열 이 있는지 확인 | 각 열에 대해filters 설정 한 위치가 정의되지 않음

children 얘는 뭐 쓸 때마다 햇깔리고 설명하기도 햇깔린다. 그래서 메모 위 같을 때 prop로 필요한 아이콘 계속 추가 할 필요 없이 으로 사용

useRef 검색 그마안 사실 자주 쓰지않고 특정상황에서만 쓰다보니 검색을 자주하게 되는데 이제 검색 그만하고 이거 보고 끝내려고 작성 useRef란 재랜더링 하지 않고 컴포넌트의 속성만 조회, 수정 하는 아이이며 dom을 직접적으로 선택하는 아이이다. useRef 사용하는 경우 Dom에 직접적으로 접근할 때, 즉 화면 상에서 특정 대상을 선택할 때(getElementById, querySelector) 속성 값을 초기화할 필요가 있는 경우(주로 카운트나 페이지 표시할 때) 재랜더링 하지 않으면서 컴포넌트 안의 변수 관리할 때 미디어 재생, 애니메이션을 직접적으로 실행 시킬 때 1.Dom에 직접적으로 접근 시 위 처럼 값을 여러개 입력하고 첫 번째 칸으로 이동해야하는 경우 필요할 수 있다. 2. 속성 값을 초기화할 필요가 있는 경우 카운트나 페이지, 타이머 등 값을 0으로 초기화 할 필요가 있을 경우 3. 재랜더링 하지

SPA(Single Page Application) spa란 말 그대로 한개의 페이지를 가진 어플리케이션이다. 이런 SPA로 개발을 하는 이유는 크게 몇가지가 있다. 페이지 전체 새로고침 방지한다 사용자 친화적이다 초기 렌더링 후 데이터만 받아오기에 서버에 요청이 적다 프론트와 벡엔드의 분리로 업무 분업화 및 협업에 좋다 CSR(Client Side Rendering) csr이란 클라이언트(사용자)가 요청시 랜더링되는 방식을 뜻한다. 즉, react를 예시로 사용자가 웹페이지를 요청하여 서버에서 html이라는 파일을 클라이언트에게 보내주면 html body안에는 root만 있게되고 이 후에 js파일을 다운 받아 동적으로 화면에 띄워준다. 이런 CSR의 단점은 느리다 SEO(Search Engine Optimization)에 좋지 않다 이 있다. 이런 문제점을 해결하기 위해 SSR이 도입되었다. SSR(Server Side Rendering) SSR이

React의 각각의 컴포넌트는 컴포넌트의 생명주기, 라이프 사이클이 존재한다. 컴포넌트의 생명은 일반적으로 페이제이서 렌더링 되기 전 준비과정에서 시작해 페이지에서 사라질 때 끝이 난다. 이를 나타내는 LifeCycle Method는 클래스형 컴포넌트에서만 사용 하는 메서드인데 useEffect와 은근히 비슷하다고 생각하면 된다. 출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 라이프 사이클의 유형 라이프 사이클은 크게 3가지 유형으로 나눌 수 있는데 생성 될 때(Mount) 업데이트 할 때(Update) 제거 할 때(Unmount) 로 나눌수 있다. 생성 될 때(Mount)는 DOM(Document Object

React 기본기를 다시 다져보자 컴포넌트 분리 우리가 새로운 함수나 객체를 만들 때 처럼 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙이다. state를 정확히 설계하고 사용하자 state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용하는 것이 옳다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만들자. 예를 들어 TODO 리스트를 만든다고 하면, TODO 아이템을 저장하는 배열만 유지하고 TODO 아이템의 개수를 표현하는 state를 별도로 만들지 말자. TODO 갯수를 렌더링해야한다면 TODO 아이템 배열의 길이를 가져오는 등의 방법으로 state의 불필요한 사용을 줄 일 수 있다. 참고

.png) 1.컴포넌트 속 JSX를 조건부로 보여주고 싶을때 2.삼항연산자 자주쓰는 간단한 if문 물론 삼항연산자는 중첩사용도 가능하나 그렇게 쓸꺼면 다른 방식으로 작성합시다. 3.&& 연산자 if문 쓸 때 만약 참이면 ~이거보여주고 아니면 null해주셈 할 때 삼항연산자 대신 보기 좋게 &&연산자 사용 추천 이경우 조건식이 true일 때 보일 값을 작성만 해주면 끝! 4. switch/case 조건문 if문을 연달아 많이 사용할때 사용하여 코드를 줄 일 수 있습니다 예시로 redux reducer쓸 때 생각해

.png) 최상단 /* eslint-disable */ 입력

.png) 나 볼려고 하는 React 자꾸 까먹거나 햇깔려서 완벽하게 외어버리기 위한 정리 일단 React는 새로고침 없이 페이지가 바뀌는게 최고의 장점 인 것 같다 거기다 앱처럼 생겼기 때문에 웹앱만들기도 짱 좋음 사용해보면 뭔가 레고 조립하는거 마냥 컴포넌트 넣고 붙이고 하는데 여기에 필요한 문법들이 많음 하나씩 정리하고 외우자 결론부터 말하고 아래 정리 일단 React는 컴포넌트들 여러개를 알맞게 조립해서 만드는 느낌이다. 이 과정에서 라우팅으로 페이지를 넘기거나 하기도 하고, 코드 길어서 분리하려면 새페이지에 코드짜고 export default와