React/React 강의 개념 정리19 [React] 컴포넌트 전환 애니메이션 주는 법 💡 전환 애니메이션 효과 주기. Step 1. 부착하면 애니메이션 나오는 className을 하나 만들어라 css 파일에 적어놓은 클래스 명은 전체 파일에 공유되니까 일단 App.css에 작성했음. 🔍Step 1-1. 애니메이션 동작 전 className 만들기 🔍Step 1-2. 애니메이션 동작 후 className 만들기 동작 후 opacity를 0.5초에 걸쳐서 변화해 주세요. transition : 특정 css 효과(start랑 비교해서 바뀐효과) 바뀐 효과 적용 시간 🔍Step 1-3. className에 transition 속성 추가 tap 부분에 적용한다고 했을 때 3개의 tap 모두에게 클래스 네임을 적용하는것 보다는 div 로 전체를 한번 감싸는것이 효율적이다. 🔍Step 1-4. 동작 .. 2023. 1. 27. [React] 탭 UI 만들기. 동적인 ui 만들기 3step Step 1.html css로 미리 디자인 해 준다. 부트스트랩에서 디자인 된 탭 창을 가져오자. 여기서 defaultActiveKey는 처음 눌려있는 탭을 의미한다. 버튼0 버튼1 버튼2 Step 2. 탭 상태 저장해둘 state 필요 탭의 종류가 3개이므로 3가지 상태를 저장할 수 있는 숫자를 초기값으로 설정해둔다. Step 3. state에 따라서 UI가 어떻게 보일지 작성 state 값이 0일 때, 1일 때 , 2일때 에 맞게 각 내용 0, 1, 2를 화면에 표시해 준다. 그전에 사용했던 동적 UI 에서 했던 방식으로 하면 이렇게 표현이 가능하다. 삼항 연산자가 아닌 if 문으로도 구성이 가능한데 컴포넌트 안에 넣어서 관리하면 된다 이때 if 문으로 작성하고자 한다면.. 2023. 1. 27. [React] 서버와 통신하려면 ajax 상품이 진열되어있는 화면에 상품 더보기 버튼을 눌러 데이터를 받아오기 이를 위해서 서버에 ajax 문법을 통해서 데이터를 요청 할 수 있다. 서버에 데이터를 요청 하다. 서버 : 누가 데이터를 요청하면 데이터를 제공해주는 프로그램. ex) Youtube 서버: 동영상 요청하면 진짜 보내주는 프로그램 네이버 웹툰 서버: 웹툰 요청하면 진짜 보내주는 프로그램 서버 개발시 짜는 코드: 누가 A 요청하면 A 보내주는 코드 서버에 데이터를 요청할 때 그냥 때쓴다고 주지 않고 '정확한 규격'에 맞는 요청을 해야 데이터를 전송해 준다. 1. 어떠한 방법으로 2. 어떤 자료를 보내달라. 를 정확한 규격으로 보내야 한다. 어떤 방법은 get 이나 post 에서 골라야 한다. 어떤 자료는 URL 이다. 어떤 자료를 받고 .. 2023. 1. 27. [React] useState의 실행 조건 주기 & clean up function. useEffect 가 실행될 때의 조건을 넣을 수 있다. useEffect 내부의 함수가 끝나고 , 이후 대괄호 안에 useEffect의 실행 조건을 넣을 수 있다. 대괄호(dependency 줄여서 deps 라고도 한다.) 안에 무엇이 들어가느냐에 따라서 다른데 아예 안쓰는 경우는 ? 그러면 모든 렌더링 때 마다 useEffect 가 실행된다. count 라는 변수가 들어가 있으면? [count] 그러면 count 라는 변수가 바뀔때 마다 useEffect가 바뀐다고 보면 된다. 대괄호를 쓰는데 그 안을 비워두면? [ ] 그러면 처음 화면이 렌더링 될 때에만 useEffect 가 실행된다. 이렇게 dependency를 비워두면 처음 화면을 새로고침할 때에만 로그가 찍히고 useState 등으로 아무리 .. 2023. 1. 27. [React] Lifecycle 과 useEffect Lifecycle 컴포넌트도 사람처럼 태어나고 죽는다라는 의미?! 페이지에 컴포넌트가 장착되기도 하고 (mount) 가끔 컴포넌트가 업데이트도 되고(재랜더링) (update) 필요 없으면 제거되고 (unmount) 컴포넌트는 다음과 같은 인생주기를 겪게 된다. 이렇게 인생주기를 알면 중간 중간 간섭이 가능하다. 즉 mount 될때 어떠한 실행 코드를 달아놓으면 실행 되는 순간 코드가 작동한다. 마찬가지로 업데이트할때나 제가 될때에도 해당 코드들을 작동이 가능하다. 옛날 클래스형을 사용했을 때 위의 중간간섭을 좀 더 직관적으로 썼다. 각 함수들이 mount 될때 update 될때 unmount 될때 실행할 코드들을 저렇게 넣어줬다. React 에서 useEffect 안애 콘솔코드는 두번 실행된다.(디버깅을.. 2023. 1. 26. [React] Styled Componets 💡초보 개발자의 프로젝트때 Styled Components 써봤던 후기 🔍장점 정말 편했다. 항상 css 파일에 따로 쓰다가 처음 StyledComponents를 알았을 땐 처음엔 왜 굳이 이걸 여기에 한번에 쓰지? 싶었는데 막상 써보니까 기존의 방법은 구식으로 느껴질 만큼 편했다. html 출력 부분을 다루고 있다가 해당 부분 수정이 필요할 때? 컨트롤 f 로 검색하거나 컨트롤 누르고 해당 컴포넌트를 클릭하면 바로 같은 페이지의 StyleComponents 화면으로 이동이 가능했다. 또한 & 을 이용해서 내부의 세부적인 div 값의 스타일을 변경할 때나 아니면 hover, after 등등의 여러 효과들을 조절할 때에도 Style Components 가 훨씬 코드가 단순하게 느껴졌고 바로바로 입력할 수 .. 2023. 1. 26. 이전 1 2 3 4 다음
