Props 속성 값

리액트 Props :  부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다. 
 =>   부모 컴포넌트 => 자식 컴포넌트로 값을 전달할 수 있음 
- props  객체입니다 
- 자식컴포넌트에서 props을 전달받았을  경우  props(예시). 데이터로 접근할 수 있음 
- 자식에서는 props는 읽기 전용 입니다 
- 모든 컴포넌트에서 props 수정할 수 없다. 
근데 부모 컴포넌트의 props를 변경하면  그걸  전달받는 자식 컴포넌트에서  리랜더링 된다. 

요기서 랜더링이란? ::  만든 페이지를 사용되는 각각의 브라우저(크롬, 익스플로러, 파이어폭스 등등)에 보이게 하는 것

예외 React.FC?? 뭘까?? 
FC :  Function Component로 함수형 컴포넌트입니다 줄여서 FC 
React + Typescript 조합으로 개발할 때 사용하는 타입 

  {/* 각 컴포넌트에 index.tsx 해당 파일에 있는 groupId값을 props로 전달하기 */}
 //예시 입니다   
 //Manager폴더에 index.tsx파일입니다  
          <ManagerHome  parseToNumGroupId={parseToNumGroupId}/>
        </TabPanel>
        <TabPanel value={1}>
        //각컴포넌트의 parseToNumGroupId props을 전달 합니다
          <Chart  parseToNumGroupId={parseToNumGroupId}/>
        </TabPanel>
        <TabPanel value={2}>
          <Vote  parseToNumGroupId={parseToNumGroupId}/>
        </TabPanel>
        <TabPanel value={3}>
          <BlackList parseToNumGroupId={parseToNumGroupId} />
        </TabPanel>
        <TabPanel value={4}>
          <Report  parseToNumGroupId={parseToNumGroupId}/>
        </TabPanel>

 

자식 컴포넌트 parseToNumGroupId을 전달 받음 

const Chart :React.FC<ChartProps> = ({parseToNumGroupId})  => {
  const [genderChart, setGenderChart] = useState<GetGenderChartResponseDto[]>(
    []
  );
  const [quarterChart, setQuarterChart] = useState<GetQuarterCharResponseDto[]>(
    []
  );
  const { groupId } = useParams();
  const [cookies] = useCookies(["token"]);

  useEffect(() => {
    fetchGenderChart();
    fetchUserChart();
  }, [groupId, cookies.token]);

  const fetchGenderChart = async () => {
    if (cookies.token) {
      try {
        const response = await axios.get(
          `http://localhost:8080/api/v1/user-list/genderChart/${groupId}`,
          {
            headers: {
              Authorization: `Bearer ${cookies.token}`,
            },
            withCredentials: true,
          }
        );
        const responseData = response.data.data;
        setGenderChart(responseData);
        console.log(responseData);
      } catch (error) {
        console.error(error);
      }
    }
  };

  const fetchUserChart = async () => {
    if (cookies.token) {
      try {
        const response = await axios.get(
          `http://localhost:8080/api/v1/user-list/userChart/${groupId}`,
          {
            headers: {
              Authorization: `Bearer ${cookies.token}`,
            },
            withCredentials: true,
          }
        );
        const responseData = response.data.data;
        setQuarterChart(responseData);
        console.log(responseData);
      } catch (error) {
        console.error(error);
      }
    }
  };
  return (
    <div css={AllBox}>
      <div css={GenderChartBox}>
        <h1>성별 차트</h1>
        <GenderChartComponent data={genderChart} />
        <div>
          <div>남성 : 💙</div>
          <div>여성 : 🍎 </div>
        </div>
      </div>

      <div css={QuarterBox}>
        <h1 css={QuartChartName}>분기별 유입율 </h1>
        <QuarterChartComponent data={quarterChart} />
      </div>
    </div>
  );
}
export default Chart;